feat: footer section adapted to desktop devices

index.html

@@ -263,37 +263,41 @@ <h2 class="collaboration__title">Interesting Collaboration With Us?</h2>
     </section>
 
     <footer class="footer">
-      <div class="footer__brand">
-        <img src="/images/logo.svg" alt="#" class="footer__logo" />
-      </div>
+      <div class="footer__container">
+        <div class="footer__brand">
+          <img src="/images/logo.svg" alt="#" class="footer__logo" />
+        </div>
 
-      <nav class="footer__nav">
-        <ul class="footer__list">
-          <li class="footer__item"><b>Terms & policies</b></li>
-          <li class="footer__item">Terms of Service</li>
-          <li class="footer__item">Privacy Policy</li>
-        </ul>
-        <ul class="footer__list">
-          <li class="footer__item"><b>Company</b></li>
-          <li class="footer__item">Home</li>
-          <li class="footer__item">About Us</li>
-          <li class="footer__item">Contact Us</li>
-        </ul>
-        <ul class="footer__list">
-          <li class="footer__item"><b>Contact</b></li>
-          <li class="footer__item">(+62) 893912392</li>
-          <li class="footer__item">[email protected]</li>
-        </ul>
-      </nav>
+        <nav class="footer__nav">
+          <ul class="footer__list">
+            <li class="footer__item"><b>Terms & policies</b></li>
+            <li class="footer__item">Terms of Service</li>
+            <li class="footer__item">Privacy Policy</li>
+          </ul>
+          <ul class="footer__list">
+            <li class="footer__item"><b>Company</b></li>
+            <li class="footer__item">Home</li>
+            <li class="footer__item">About Us</li>
+            <li class="footer__item">Contact Us</li>
+          </ul>
+          <ul class="footer__list">
+            <li class="footer__item"><b>Contact</b></li>
+            <li class="footer__item">(+62) 893912392</li>
+            <li class="footer__item">[email protected]</li>
+          </ul>
+        </nav>
 
-      <div class="footer__localization">
-        <b class="footer__localization-title">Location</b>
-        <p class="footer__localization-text">
-          PT Osiris Real Estate Internasional
-        </p>
-        <p class="footer__localization-text">Jl. KH. Wahid Hasyim Kel No.10D</p>
-        <p class="footer__localization-text">Jakarta, Indonesia</p>
-        <p class="footer__localization-text">[email protected]</p>
+        <div class="footer__localization">
+          <b class="footer__localization-title">Location</b>
+          <p class="footer__localization-text">
+            PT Osiris Real Estate Internasional
+          </p>
+          <p class="footer__localization-text">
+            Jl. KH. Wahid Hasyim Kel No.10D
+          </p>
+          <p class="footer__localization-text">Jakarta, Indonesia</p>
+          <p class="footer__localization-text">[email protected]</p>
+        </div>
       </div>
 
       <div class="footer__social">

scss/sections/footer.scss

@@ -3,19 +3,37 @@
   background-color: $color-oil;
   color: white;
 
+  &__container {
+    max-width: 1240px;
+    margin: auto;
+
+    @media (min-width: $md) {
+      display: grid;
+      width: 100%;
+      gap: 40px;
+      grid-template-columns: 250px 1fr 250px;
+    }
+  }
+
   &__brand {
     width: fit-content;
     background-color: white;
     margin-bottom: 80px;
     border-radius: 20px;
     padding: 15px 25px;
+    height: fit-content;
   }
 
   &__nav {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 28px;
     margin-bottom: 45px;
+
+    @media (min-width: $md) {
+      grid-template-columns: repeat(3, 1fr);
+      gap: 20px;
+    }
   }
 
   &__list {