Add responsive on Homepage elements

src/style/molecules/_location.scss

@@ -1,19 +1,27 @@
 .location {
+    display: block;
     position: relative;
-    text-align: center;
+
+    @include bp (sm) {
+        text-align: center;
+    }
 
     a {
         display: flex;
-        flex-direction: column;
-        justify-content: center;
-        padding: 24px;
+        align-items: center;
         text-decoration: none;
 
+        @include bp (sm) {
+            flex-direction: column;
+            justify-content: center;
+            padding: 24px;
+        }
+
         // 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
-    img {
-        display: block;
-        margin: 0 auto;
-        border-radius: 100%;
+    &__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;
-        font-size: rem(48px);
+        margin: 0 0 4px;
+        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 {
-        position: absolute;
-        left: 50%;
-        bottom: -8px;
-        transform: translateX(-50%);
+        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 {