Add responsive on Homepage elements

src/components/molecules/Location.svelte

@@ -57,7 +57,8 @@
         on:mouseleave={handleMouseLeave}
         sveltekit-noscroll
     >
-        <Image id={country.flag.id} alt="Flag of {country.name}" width={32} height={32} />
+        <Image class="location__flag" id={country.flag.id} alt="Flag of {country.name}" width={32} height={32} />
+        <div class="text">
             <dl>
                 <dt class="location__name">
                     {name}
@@ -69,6 +70,7 @@
             {#if isNew}
                 <Badge text="New" />
             {/if}
+        </div>
     </a>
     <div class="location__photos">
         <span>{photoIndex}</span>

src/style/_typography.scss

@@ -34,10 +34,15 @@
     line-height: 1.5;
 }
 .text-medium {
-    font-size: rem(28px);
+    font-size: rem(20px);
     font-family: $font-sans;
     font-weight: 300;
+    line-height: 1.4;
+
+    @include bp (sm) {
+        font-size: rem(28px);
         line-height: 1.5;
+    }
 }
 .text-small {
     font-size: rem(22px);
@@ -47,7 +52,7 @@
 
 .text-label {
     font-size: rem(12px);
-    line-height: 1.5;
+    line-height: 1.4;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

src/style/atoms/_badge.scss

@@ -11,7 +11,6 @@
     letter-spacing: 1px;
     line-height: 1;
     min-height: 16px;
-    margin-top: 20px;
 
     // Small size
     &--small {

src/style/atoms/_box-cta.scss

@@ -1,19 +1,31 @@
 .box-cta {
     display: flex;
-    flex-direction: column;
-    justify-content: center;
     align-items: center;
-    width: 144px;
+    margin: 0 auto;
-    height: 176px;
+    width: 260px;
-    padding: 24px 16px;
+    height: 88px;
+    padding: 24px 32px 24px 48px;
     background-color: $color-primary-tertiary20;
     border-radius: 12px;
     text-decoration: none;
 
+    @include bp (sm) {
+        flex-direction: column;
+        width: 144px;
+        height: 176px;
+        padding: 24px 16px;
+    }
+
     .icon {
+        width: 36px;
+        height: 36px;
+        flex-shrink: 0;
+
+        @include bp (sm) {
             margin: auto 0;
             width: 48px;
             height: 48px;
+        }
 
         img {
             display: block;
@@ -25,5 +37,12 @@
     span {
         display: block;
         color: $color-secondary-light;
+        text-align: left;
+        margin-left: 24px;
+
+        @include bp (sm) {
+            margin-left: 0;
+            text-align: center;
+        }
     }
 }

src/style/molecules/_location.scss

@@ -1,19 +1,27 @@
 .location {
+    display: block;
     position: relative;
+
+    @include bp (sm) {
         text-align: center;
+    }
 
     a {
         display: flex;
+        align-items: center;
+        text-decoration: none;
+
+        @include bp (sm) {
             flex-direction: column;
             justify-content: center;
             padding: 24px;
-        text-decoration: none;
+        }
 
         // Background circle
         &:after {
+            display: none;
             opacity: 0;
             content: "";
-            display: block;
             position: absolute;
             pointer-events: none;
             top: 50%;
@@ -25,6 +33,10 @@
             background-color: rgba($color-tertiary, 0.1);
             border-radius: 100%;
             transition: transform 0.75s var(--ease-quart), opacity 0.75s var(--ease-quart);
+
+            @include bp (sm) {
+                display: block;
+            }
         }
 
         // Hover
@@ -40,22 +52,34 @@
     }
 
     // Flag
+    &__flag {
         img {
             display: block;
             margin: 0 auto;
             border-radius: 100%;
+            margin-right: 24px;
+
+            @include bp (sm) {
+                margin-right: 0;
+            }
+        }
     }
 
     // Location name
     &__name {
         display: block;
         color: $color-secondary;
-        margin: 20px 0 8px;
+        margin: 0 0 4px;
-        font-size: rem(48px);
+        font-size: rem(32px);
         font-family: $font-serif;
         font-weight: 300;
         line-height: 1.2;
         transition: color 0.75s var(--ease-quart);
+
+        @include bp (sm) {
+            margin: 20px 0 8px;
+            font-size: rem(48px);
+        }
     }
 
     // Country
@@ -65,14 +89,19 @@
 
     // Badge
     .badge {
+        display: inline-flex;
+
+        @include bp (sm) {
             position: absolute;
             left: 50%;
             bottom: -8px;
             transform: translateX(-50%);
         }
+    }
 
     // Photos
     &__photos {
+        display: none;
         opacity: 0;
         position: absolute;
         z-index: 2;
@@ -87,6 +116,10 @@
         box-shadow: 0 8px 8px rgba(#000, 0.1), 0 16px 28px rgba(#000, 0.12);
         pointer-events: none;
         transition: opacity 0.5s var(--ease-quart);
+
+        @include bp (sm) {
+            display: block;
+        }
     }
 
     &:hover {

src/style/organisms/_locations.scss

@@ -1,9 +1,18 @@
 .browse {
+    margin-top: 96px;
 
     // Description
     &__description {
+        font-size: rem(20px);
+        margin: 0 auto 32px;
+        max-width: 230px;
         text-align: center;
+
+        @include bp (sm) {
+            font-size: rem(28px);
             margin-bottom: 56px;
+            max-width: none;
+        }
     }
 
     // Continents
@@ -17,15 +26,35 @@
 
     // Locations
     &__locations {
+        width: 70%;
+        max-width: 1200px;
+        margin: 88px auto 80px;
+        padding: 0 32px;
+
+        @include bp (mob-lg) {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            justify-content: center;
+            grid-gap: 40px 24px;
+            width: 85%;
+            padding: 0;
+        }
+        @include bp (sm) {
             display: flex;
             flex-flow: row wrap;
-        justify-content: center;
+            width: 100%;
-        max-width: 1200px;
             margin: 104px auto 80px;
-        justify-items: center;
+        }
 
         .location {
+            margin-bottom: 40px;
+
+            @include bp (mob-lg) {
+                margin-bottom: 0;
+            }
+            @include bp (sm) {
                 margin: 0 22px 56px;
             }
         }
+    }
 }

src/style/pages/_homepage.scss

@@ -7,18 +7,27 @@
         color: $color-text;
         text-align: center;
         overflow: hidden;
-        padding-bottom: clamp(100px, 27vw, 600px);
+        padding-bottom: clamp(250px, 27vw, 600px);
 
         // Title
         h1 {
             color: $color-secondary;
             line-height: 1;
+            margin-top: -20px;
+
+            @include bp (sm) {
                 margin-top: -100px;
             }
+        }
         // Text
         p {
+            max-width: 350px;
+            margin: 100px auto 32px;
+
+            @include bp (sm) {
+                margin: 20px auto 32px;
                 max-width: 524px;
-            margin: 0 auto 32px;
+            }
         }
         // Button
         .button {
@@ -31,9 +40,13 @@
     &__photos {
         position: relative;
         max-width: 2000px;
-        height: clamp(500px, 45vw, 900px);
+        height: clamp(400px, 45vw, 900px);
+        margin: calc(-1 * clamp(200px, 20vw, 500px)) auto 0;
+
+        @include bp (sm) {
             margin: calc(-1 * clamp(300px, 20vw, 500px)) auto 0;
         }
+    }
     &__collage {
         display: grid;
         grid-template-columns: repeat(32, 1fr);
@@ -137,10 +150,15 @@
 
         p {
             font-family: $font-sans;
-            font-size: rem(32px);
+            font-size: rem(28px);
             color: $color-tertiary;
             font-weight: 300;
             line-height: 1.5;
+            padding: 0 20px;
+
+            @include bp (sm) {
+                font-size: rem(32px);
+            }
 
             strong {
                 font-weight: 300;
@@ -149,13 +167,21 @@
         }
 
         .cards {
-            display: flex;
             justify-content: center;
+            margin-top: 48px;
+
+            @include bp (sm) {
+                display: flex;
                 margin-top: 72px;
+            }
 
             & > * {
+                margin: 20px auto 0;
+
+                @include bp (sm) {
                     margin: 0 16px;
                 }
             }
         }
+    }
 }