Fix style and responsive issues

src/components/atoms/Icon.svelte

@@ -5,6 +5,6 @@
     const classes = [$$props.class].join(' ').trim()
 </script>
 
-<svg class={classes} aria-label={label}>
+<svg class={classes} aria-label={label} width="32" height="32">
     <use xlink:href="#icon-{icon}" />
 </svg>

src/components/organisms/Footer.svelte

@@ -37,11 +37,5 @@
                 </li>
             </ul>
         </nav>
-
-        <div class="footer__ctf">
-            <a href="https://cetrucflotte.com" target="_blank" rel="noopener external">
-                <img src="/images/logo-ctf.svg" alt="Cetrucflotte logo" width="140" height="24">
-            </a>
-        </div>
     </div>
 </footer>

src/style/_effects.scss

@@ -51,7 +51,7 @@
         perspective: 300px;
     }
     .text-split__line {
-        --offset-y: 100%;
+        --offset-y: 66%;
         transform-origin: bottom center;
 
         &:last-child {

src/style/atoms/_box-cta.scss

@@ -39,7 +39,7 @@
     }
     span {
         display: block;
-        margin-left: 24px;
+        margin-left: 20px;
         color: $color-secondary-light;
         text-align: left;
         font-weight: 300;

src/style/atoms/_button-cart.scss

@@ -1,7 +1,6 @@
-// Cart
 .button-cart {
-    display: none;
     position: relative;
+    pointer-events: auto;
 
     @include bp (sm) {
         display: flex;
@@ -14,11 +13,11 @@
 
     // Icon
     svg {
-        color: #fff;
         display: block;
-        width: 27px;
+        width: min(65%, 27px);
-        height: 27px;
+        height: min(65%, 27px);
         margin-top: -3px;
+        color: #fff;
     }
 
     // Quantity label
@@ -31,13 +30,19 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        width: 22px;
+        width: 18px;
-        height: 22px;
+        height: 18px;
-        font-size: rem(12px);
+        font-size: rem(11px);
         font-weight: 600;
         color: #fff;
         background-color: $color-secondary;
         border-radius: 100%;
         opacity: 1;
+
+        @include bp (md) {
+            width: 22px;
+            height: 22px;
+            font-size: rem(12px);
+        }
     }
 }

src/style/atoms/_button.scss

@@ -106,11 +106,6 @@
             color: $color-text;
             background-color: darken($color-secondary, 7);
         }
-        .text-split__line {
-            &:last-child {
-                color: $color-primary-dark;
-            }
-        }
     }
 
     // Beige

src/style/molecules/_location.scss

@@ -69,12 +69,13 @@
     // Location name
     &__name {
         display: block;
-        color: $color-secondary;
+        max-width: 304px;
-        margin: 0 0 4px;
+        margin: 0 0 0.3em;
         font-size: rem(32px);
         font-family: $font-serif;
         font-weight: 300;
-        line-height: 1.2;
+        line-height: 1.1;
+        color: $color-secondary;
         transition: color 0.75s var(--ease-quart);
 
         @include bp (sm) {

src/style/molecules/_shop-locationswitcher.scss

@@ -1,4 +1,6 @@
 .shop-locationswitcher {
+    pointer-events: auto;
+
     dt {
         color: $color-primary;
         font-weight: 400;

src/style/organisms/_footer.scss

@@ -10,15 +10,17 @@
     }
 
     .container {
-        align-items: center;
         justify-content: center;
         height: 100%;
+
+        @include bp (sm) {
+            align-items: center;
+        }
     }
 
     // Site title
     &__title {
-        grid-column: span var(--columns);
+        grid-column: 1 / span 4;
-        grid-row: 1;
         display: block;
         margin-bottom: 40px;
         text-decoration: none;
@@ -43,12 +45,14 @@
 
     // Links
     &__links {
-        grid-column: span var(--columns);
+        grid-column: 5 / span 3;
-        grid-row: 2;
+        margin-left: auto;
 
         @include bp (sm) {
-            grid-column: 5 / span 16;
+            grid-column: 5 / span 19;
             grid-row: 1;
+            margin-left: auto;
+            margin-top: 0.15em;
         }
 
         ul {
@@ -100,6 +104,8 @@
                 position: relative;
             }
             svg {
+                width: 1.2em;
+                height: auto;
                 transition: color 0.35s;
             }
 
@@ -111,34 +117,4 @@
             }
         }
     }
-
-    // Cetrucflotte logo
-    &__ctf {
-        grid-column: span var(--columns);
-        grid-row: 2;
-        margin-left: auto;
-        margin-top: auto;
-        max-width: 120px;
-
-        @include bp (sm) {
-            grid-column: 19 / span 5;
-            grid-row: 1;
-            max-width: 112px;
-            margin-top: 0;
-        }
-        @include bp (md) {
-            max-width: 140px;
-        }
-
-        img {
-            display: block;
-            width: 100%;
-            height: auto;
-        }
-        span {
-            font-size: rem(12px);
-            color: $color-lilas-bright;
-            margin-right: 24px;
-        }
-    }
 }

src/style/pages/_homepage.scss

@@ -4,15 +4,18 @@
     &__title {
         // Houses
         &--houses {
-            margin: -20px 0 0;
+            display: flex;
+            margin: -28px 0 0;
             color: $color-secondary;
             text-align: center;
 
             @include bp (sm) {
-                margin-top: -100px;
+                margin-top: calc(-1 * clamp(24px, 5vw, 104px));
-                margin-left: calc(-1 * clamp(24px, 6vw, 64px));
             }
 
+            .text-split {
+                margin-left: calc(-1 * clamp(24px, 5vw, 64px));
+            }
             span {
                 transition: none;
                 letter-spacing: -0.06em;
@@ -35,11 +38,11 @@
 
     // Intro Section
     &__intro {
+        overflow: hidden;
+        padding-bottom: calc(96px + 20vw);
         background: linear-gradient(180deg, $color-tertiary 85%, $color-primary 100%), $color-tertiary;
         color: $color-text;
         text-align: center;
-        overflow: hidden;
-        padding-bottom: calc(96px + 5vw);
 
         @include bp (sm) {
             padding-bottom: calc(280px + 10vw);
@@ -77,11 +80,11 @@
         // Headline
         &__headline {
             max-width: 350px;
-            margin: 100px auto 0;
+            margin: clamp(24px, 10vw, 96px) auto 0;
 
             @include bp (sm) {
                 max-width: 524px;
-                margin-top: 20px;
+                margin-top: 24px;
             }
 
             p {
@@ -97,7 +100,7 @@
     &__photos {
         position: relative;
         max-width: 2000px;
-        margin: calc(-1 * 96px + 5vw) 0 80px;
+        margin: calc(-1 * 96px - 4vw) 0 80px;
 
         @include bp (sm) {
             margin: calc(-1 * clamp(300px, 20vw, 500px)) auto clamp(64px, 6.5vw, 128px);