feat(sponsors): add fade-in and fade-out effects & fix responsive layout;

scss/home.scss

@@ -239,49 +239,32 @@ html[dir="rtl"] {
 }
 
 .splide {
-  height: 9rem;
-  padding: 0 45px;
+  height: 8rem;
+  padding: 0 55px;
   margin: 0 calc(-1 * var(--margin) / 2);
 }
 
 li.sponsor-card {
-  width: calc(12%);
+  width: max(10%, 170px);
 
   &[data-tier=silver] {
-    width: calc(17%);
+    width: max(15%, 200px);
   }
 
   &[data-tier=gold] {
-    width: calc(22%);
+    width: max(20%, 230px);
   }
 
   &[data-tier=platinum] {
-    width: calc(30%);
+    width: max(25%, 260px);
   }
 }
 
-@media (max-width: 1400px) {
-  li.sponsor-card {
-    width: calc(20%);
-
-    &[data-tier=silver] {
-      width: calc(25%);
-    }
+@media (max-width: 320px) {
 
-    &[data-tier=gold] {
-      width: calc(30%);
-    }
-
-    &[data-tier=platinum] {
-      width: calc(35%);
+  li.sponsor-card {
+    a:has(img) .caption {
+      display: none;
     }
   }
 }
-
-@media (max-width: 1000px) {
-  li.sponsor-card img + .caption {
-    display: none;
-  }
-
-
-}

scss/home_variables.scss

@@ -3,6 +3,7 @@
   --primary-shadow-color: #5b29e45d;
   --secondary-color: #D442C6;
   --fg-color: #1f1c24;
+  --col-bg: #ffffff;
   --margin: 60px;
   --font-sans: 'DM Sans', sans-serif;
   --font-mono: 'DM Mono', monospace;
@@ -42,4 +43,4 @@
       width: 60% !important;
     }
   }
-}
+}

scss/post.scss

@@ -1,17 +1,16 @@
 li.sponsor-card {
-
-  width: calc(15%);
-
 /*  &[data-has-logo=true] .caption {
     display: none;
   }*/
 
+  width: max(20%, 170px);
+
   &[data-tier=gold] {
-    width: calc(25%);
+    width: max(25%, 220px);
   }
 
   &[data-tier=platinum] {
-    width: calc(33%);
+    width: max(30%, 250px);
   }
 }
 
@@ -35,3 +34,20 @@ blockquote{
     padding: 10px;
   }
 }
+
+@media (max-width: 480px) {
+
+  li.sponsor-card {
+    width: calc(100%);
+  }
+}
+
+@media (max-width: 400px) {
+
+  li.sponsor-card {
+
+    a:has(img) .caption {
+      display: none;
+    }
+  }
+}

scss/sponsors.scss

@@ -17,11 +17,8 @@ body.dark {
 }
 
 .splide {
-  height: 7rem;
-/*  background-color: var(--carousel-bg);*/
+  height: 7.3rem;
   border-radius: 5px;
-  padding: 0 55px;
-  margin: 0 calc(-1 * var(--margin) / 2);
 
   .splide__arrows {
     visibility: hidden;
@@ -31,6 +28,30 @@ body.dark {
     height: 100%;
   }
 
+  .splide__track::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%;
+    width: 30px;
+    pointer-events: none;
+    background: linear-gradient(to right, transparent, var(--col-bg));
+    z-index: 1;
+  }
+
+  .splide__track::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 30px;
+    pointer-events: none;
+    z-index: 1;
+    background: linear-gradient(to left, transparent, var(--col-bg));
+  }
+
   &:hover .splide__arrows {
     visibility: visible;
   }
@@ -40,7 +61,7 @@ li.sponsor-card {
 
   width: calc(15%);
 
-  padding: 1.2rem 0;
+  padding: 1.5rem 0 1.5rem 1.5rem;
 
   .chevron{
     flex-grow: 0;