WIP marquee and some refactoring

src/styles/components/marquee.css

@@ -29,17 +29,18 @@
   position: relative;
   display: flex;
   width: 100%;
-  margin-block: var(--lg);
+  margin-block: var(--xl);
   justify-content: space-between;
   align-items: center;
   scroll-snap-type: x mandatory;
 }
 
 .marquee-content {
-  width: 100%;
   height: 100%;
   overflow: hidden;
   display: flex;
+  will-change: transform;
+  transform: translateX(0);
 }
 
 .marquee-item {
@@ -53,7 +54,7 @@
   gap: var(--md);
   padding-inline: 0.5rem;
 
-  & > * {
+  &>* {
     z-index: 11;
   }
 
@@ -98,7 +99,7 @@
   flex-direction: column;
   justify-content: center;
 
-  & > div {
+  &>div {
     width: 2.5rem;
     aspect-ratio: 1 / 1;
     display: flex;
@@ -112,7 +113,7 @@
   &:hover {
     cursor: pointer;
 
-    & > div {
+    &>div {
       opacity: 0.9;
     }
   }
@@ -146,7 +147,7 @@
   .marquee-scroll-arrow {
     height: unset;
 
-    & > div {
+    &>div {
       background-color: #55555580;
       border-radius: var(--radius-xs);
     }

src/styles/css-config/base.css

@@ -7,6 +7,8 @@ html {
   font-weight: 400;
 
   height: 100svh;
+  width: 100svw;
+  max-width: 100svw;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;