Made the banners less cut off on desktop, they look really low quality tho so I'll need to fix that

src/views/BetterAperture.vue

@@ -185,13 +185,18 @@ Join the support group on Telegram: <a href="https://puffercatrom.t.me">https://
   } .aboutFrameworkLogo {
     width: 175px;
   } .bannerColumn {
-    height: 200px;
+    height: 500px;
     background-image: url("../assets/Banner_BetterAperture.png");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     border-radius: 25px;
-  } .column-standard2 {
+  }
+  @media screen and (max-width: 850px) {
+    .bannerColumn {
+        height: 200px;
+    }
+} .column-standard2 {
       background-color: transparent;
       color: var(--ion-color-light-contrast);
     padding: 0px;

src/views/Blurry_Wallpapers.vue

@@ -173,13 +173,18 @@ Blurry wallpapers with and without grain. The collection will be frequently upda
   } .aboutFrameworkLogo {
     width: 175px;
   } .bannerColumn {
-    height: 200px;
+    height: 500px;
     background-image: url("../assets/Banner_Blurry_Wallpapers.png");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     border-radius: 25px;
-  } .column-standard2 {
+  }
+  @media screen and (max-width: 850px) {
+    .bannerColumn {
+        height: 200px;
+    }
+} .column-standard2 {
       background-color: transparent;
       color: var(--ion-color-light-contrast);
     padding: 0px;

src/views/Duo.vue

@@ -154,13 +154,18 @@
   } .aboutFrameworkLogo {
     width: 175px;
   } .bannerColumn {
-    height: 200px;
+    height: 500px;
     background-image: url("../assets/Banner_Duo.png");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     border-radius: 25px;
-  } .column-standard2 {
+  }
+  @media screen and (max-width: 850px) {
+    .bannerColumn {
+        height: 200px;
+    }
+} .column-standard2 {
       background-color: transparent;
       color: var(--ion-color-light-contrast);
     padding: 0px;

src/views/PufferIcons.vue

@@ -164,14 +164,21 @@ Lawnicons is an add-on for adding themed icons to Lawnchair 12 Alpha 5 and above
     }
   } .aboutFrameworkLogo {
     width: 175px;
-  } .bannerColumn {
-    height: 200px;
+  }
+  .bannerColumn {
+    height: 500px;
     background-image: url("../assets/Banner_PufferIcons.png");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     border-radius: 25px;
-  } .column-standard2 {
+  }
+  @media screen and (max-width: 850px) {
+    .bannerColumn {
+        height: 200px;
+    }
+}
+  .column-standard2 {
       background-color: transparent;
       color: var(--ion-color-light-contrast);
     padding: 0px;

src/views/PufferIcons_Filled.vue

@@ -155,13 +155,18 @@ PufferIcons Filled as well as Rkicons are filled while PufferIcons and Lawnicons
   } .aboutFrameworkLogo {
     width: 175px;
   } .bannerColumn {
-    height: 200px;
+    height: 500px;
     background-image: url("../assets/Banner_PufferIcons_Filled.png");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     border-radius: 25px;
-  } .column-standard2 {
+  }
+  @media screen and (max-width: 850px) {
+    .bannerColumn {
+        height: 200px;
+    }
+} .column-standard2 {
       background-color: transparent;
       color: var(--ion-color-light-contrast);
     padding: 0px;

src/views/Puffercat_Apps.vue

@@ -203,13 +203,18 @@ The full catalog of apps created by Puffercat as well as ones currently in devel
   } .aboutFrameworkLogo {
     width: 175px;
   } .bannerColumn {
-    height: 200px;
+    height: 500px;
     background-image: url("../assets/Banner_Puffercat_Apps.png");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     border-radius: 25px;
-  } .column-standard2 {
+  }
+  @media screen and (max-width: 850px) {
+    .bannerColumn {
+        height: 200px;
+    }
+} .column-standard2 {
       background-color: transparent;
       color: var(--ion-color-light-contrast);
     padding: 0px;

src/views/Shapes.vue

@@ -179,13 +179,18 @@ Shapes is a collection of monet-compliant wallpapers available in many colors<br
   } .aboutFrameworkLogo {
     width: 175px;
   } .bannerColumn {
-    height: 200px;
+    height: 500px;
     background-image: url("../assets/Banner_Shapes.png");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     border-radius: 25px;
-  } .column-standard2 {
+  }
+  @media screen and (max-width: 850px) {
+    .bannerColumn {
+        height: 200px;
+    }
+} .column-standard2 {
       background-color: transparent;
       color: var(--ion-color-light-contrast);
     padding: 0px;

src/views/WallCat.vue

@@ -167,13 +167,18 @@
   } .aboutFrameworkLogo {
     width: 175px;
   } .bannerColumn {
-    height: 200px;
+    height: 500px;
     background-image: url("../assets/Banner_WallCat.png");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     border-radius: 25px;
-  } .column-standard2 {
+  }
+  @media screen and (max-width: 850px) {
+    .bannerColumn {
+        height: 200px;
+    }
+} .column-standard2 {
       background-color: transparent;
       color: var(--ion-color-light-contrast);
     padding: 0px;