list-promo: allow for longer content; simplify CSS; improve visual tr…

…ansition
vanda · Dec 13, 2024 · a5217db · a5217db
1 parent a38dba8
commit a5217db
Showing 1 changed file with 10 additions and 22 deletions.
diff --git a/src/components/blocks/list-promo/_list-promo.scss b/src/components/blocks/list-promo/_list-promo.scss
@@ -65,31 +65,27 @@
   }
 
   &__image-list-container {
+    min-height: 190px;
     position: relative;
 
     @include mixins.breakpoints-bpMinSmall {
       flex: 1 1 0;
+      min-height: 296px;
+    }
+
+    @include mixins.breakpoints-bpMinMedium {
+      min-height: 390px;
     }
   }
 
   &__image-list-item {
-    height: 0;
+    inset: 0;
     opacity: 0;
-    transition: visibility 0s, opacity 0.3s ease-in;
-    visibility: hidden;
+    position: absolute;
+    transition: opacity 0.3s ease-in;
 
     &--active {
-      height: 190px;
       opacity: 1;
-      visibility: visible;
-
-      @include mixins.breakpoints-bpMinSmall {
-        height: 296px;
-      }
-
-      @include mixins.breakpoints-bpMinMedium {
-        height: 390px;
-      }
     }
   }
 
@@ -100,19 +96,11 @@
   }
 
   &__ctrls {
+    bottom: 10px;
     display: none;
     gap: 4px;
     position: absolute;
     right: 10px;
-    top: 155px;
-
-    @include mixins.breakpoints-bpMinSmall {
-      top: 250px;
-    }
-
-    @include mixins.breakpoints-bpMinMedium {
-      top: 345px;
-    }
 
     &--active {
       display: flex;