Refactoring

libs/ui/src/lib/logo-carousel/logo-carousel.component.html

@@ -1,5 +1,5 @@
 <div class="logo-carousel-container overflow-hidden position-relative w-100">
-  <div class="d-flex logo-carousel-track">
+  <div class="align-items-center d-flex logo-carousel-track">
     @for (logo of logosRepeated; track $index) {
       <div class="logo-carousel-item">
         <a

libs/ui/src/lib/logo-carousel/logo-carousel.component.scss

@@ -47,17 +47,14 @@
         width: 30px;
       }
     }
-  }
 
     .logo-carousel-track {
-    align-items: center;
       animation: scroll 60s linear infinite;
       width: fit-content;
 
       &:hover {
         animation-play-state: paused;
       }
-  }
 
       .logo-carousel-item {
         flex-shrink: 0;
@@ -73,7 +70,6 @@
           min-width: 120px;
           padding: 0.5rem 1rem;
         }
-  }
 
         .logo {
           height: 3rem;
@@ -168,6 +164,18 @@
         }
       }
 
+      @keyframes scroll {
+        0% {
+          transform: translateX(0);
+        }
+        100% {
+          transform: translateX(-50%);
+        }
+      }
+    }
+  }
+}
+
 :host-context(.theme-dark) {
   .logo-carousel-container {
     &::before {
@@ -185,7 +193,6 @@
         rgba(var(--palette-background-background-dark), 0) 100%
       );
     }
-  }
 
     .logo {
       &.logo-alternative-to,
@@ -203,12 +210,4 @@
       }
     }
   }
-
-@keyframes scroll {
-  0% {
-    transform: translateX(0);
-  }
-  100% {
-    transform: translateX(-50%);
-  }
 }