Update code

src/index.pug

@@ -1,15 +1,15 @@
 include ./includes/mixins
 
 doctype html
-html(lang="en")
+html(lang='en')
   head
-    meta(charset="UTF-8")
+    meta(charset='UTF-8')
-    meta(name="viewport", content="width=device-width, initial-scale=1.0")
+    meta(name='viewport', content='width=device-width, initial-scale=1.0')
-    link(rel="stylesheet", href="./styles/main.scss")
+    link(rel='stylesheet', href='./styles/_main.scss')
     link(
-      rel="icon",
+      rel='icon',
-      type="image/x-icon",
+      type='image/x-icon',
-      href="./assets/images/favicon-16x16.png"
+      href='./assets/images/favicon-16x16.png'
     )
     title Food Hut
   body

src/sections/menu.pug

@@ -6,6 +6,7 @@
 - var default_food_data = { price: '10', ratePoint: '4.5', foodName: 'Kebab', foodDescription: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry', avatarImageList: [{ avatarUrl: avatar_img_path + 'avatar-1.png' }, { avatarUrl: avatar_img_path + 'avatar-2.png' }, { avatarUrl: avatar_img_path + 'avatar-3.png' }] };
 
 section.menu
+  .wrapper
     .menu__container
       h2.menu__heading
         span.text--primary Menu

src/sections/offer.pug

@@ -9,6 +9,7 @@
 - var list_food = [food_1, food_2, food_3, food_4];
 
 section.offer
+  .wrapper
     .offer__container
       .offer__dot-background
         img(

src/sections/platform.pug

@@ -2,6 +2,7 @@
 - var list_food_image_path = [{mobile_image_path: platform_image_path + "food-1-mobile.png", desktop_image_path: platform_image_path + "food-1-desktop.png"}, {mobile_image_path: platform_image_path + "food-2-mobile.png", desktop_image_path: platform_image_path + "food-2-desktop.png"}, {mobile_image_path: platform_image_path + "food-3-mobile.png", desktop_image_path: platform_image_path + "food-3-desktop.png"}, {mobile_image_path: platform_image_path + "food-4-mobile.png", desktop_image_path: platform_image_path + "food-4-desktop.png"}];
 
 section.platform
+  .wrapper
     .platform__container
       .platform__image-container
         each item in list_food_image_path 

src/sections/service.pug

@@ -4,6 +4,7 @@
 - var list_service_category = [list_service_category_1, list_service_category_2];
 
 section.service
+  .wrapper
     .service__container
       .service__background-color
       .service__img-container

src/sections/welcome.pug

@@ -2,6 +2,7 @@
 - var list_food_image_mobile = [{img_mobile_path: welcome_img_path + "food-1-mobile.png", img_desktop_path: welcome_img_path + "food-1-desktop.png"}, {img_mobile_path: welcome_img_path + "food-2-mobile.png", img_desktop_path: welcome_img_path + "food-2-desktop.png"}, {img_mobile_path: welcome_img_path + "food-3-mobile.png", img_desktop_path: welcome_img_path + "food-3-desktop.png"}, {img_mobile_path: welcome_img_path + "food-4-mobile.png", img_desktop_path: welcome_img_path + "food-4-desktop.png"}];
 
 section.welcome
+  .wrapper
     .welcome__container
       .welcome__banner
         .welcome__banner-container
@@ -17,7 +18,10 @@ section.welcome
               )
             each item in list_food_image_mobile
               picture.welcome__food-img
-              source(media='(min-width: 1200px)', srcset=item.img_desktop_path)
+                source(
+                  media='(min-width: 1200px)',
+                  srcset=item.img_desktop_path
+                )
                 img(src=item.img_mobile_path, alt='Food image')
             picture
               source(
@@ -89,7 +93,10 @@ section.welcome
               alt='Love icon'
             )
           .welcome__head-arrow-container
-          img(src=welcome_img_path + 'head-arrow.png', alt='Head arrow image')
+            img(
+              src=welcome_img_path + 'head-arrow.png',
+              alt='Head arrow image'
+            )
           p.welcome__text-box-content People Trust us
         h1.welcome__heading We're
           = ' '

src/styles/_main.scss

@@ -17,8 +17,8 @@
 @import './layouts/footer';
 
 //Sections
-@import './sections/welcome';
+@import './pages/home/welcome';
-@import './sections/offer';
+@import './pages/home/offer';
-@import './sections/service';
+@import './pages/home/service';
-@import './sections/menu';
+@import './pages/home/menu';
-@import './sections/platform';
+@import './pages/home/platform';

src/styles/bases/_base.scss

@@ -1,3 +1,14 @@
 body {
   min-width: 428px;
 }
+
+.wrapper {
+  max-width: 428px;
+  margin-inline: auto;
+}
+
+@media screen and (min-width: 600px) {
+  .wrapper {
+    max-width: $max-width;
+  }
+}

src/styles/bases/_typography.scss

@@ -9,6 +9,8 @@ $font-path: '../assets/fonts';
   src: url('#{$font-path}/sofia-pro-regular.woff2') format('woff2'),
     url('#{$font-path}/sofia-pro-regular.ttf') format('truetype');
   font-weight: 400;
+
+  font-display: swap;
 }
 
 @font-face {
@@ -16,6 +18,8 @@ $font-path: '../assets/fonts';
   src: url('#{$font-path}/sofia-pro-medium.woff2') format('woff2'),
     url('#{$font-path}/sofia-pro-medium.ttf') format('truetype');
   font-weight: 600;
+
+  font-display: swap;
 }
 
 @font-face {
@@ -23,6 +27,8 @@ $font-path: '../assets/fonts';
   src: url('#{$font-path}/sofia-pro-semi-bold.woff2') format('woff2'),
     url('#{$font-path}/sofia-pro-semi-bold.ttf') format('truetype');
   font-weight: 700;
+
+  font-display: swap;
 }
 
 @font-face {
@@ -30,18 +36,24 @@ $font-path: '../assets/fonts';
   src: url('#{$font-path}/sofia-pro-bold.woff2') format('woff2'),
     url('#{$font-path}/sofia-pro-bold.ttf') format('truetype');
   font-weight: 900;
+
+  font-display: swap;
 }
 
 @font-face {
   font-family: 'Inter';
   src: url('#{$font-path}/inter.woff2') format('woff2'),
     url('#{$font-path}/inter.ttf') format('truetype');
+
+  font-display: swap;
 }
 
 @font-face {
   font-family: 'Poppins';
   src: url('#{$font-path}/poppins-medium.woff2') format('woff2'),
     url('#{$font-path}/poppins-medium.ttf') format('truetype');
+
+  font-display: swap;
 }
 
 * {

src/styles/components/_card-item.scss

@@ -4,7 +4,7 @@
 
 .card {
   @extend %d-flex, %align-center-col;
-  @include size(auto, 516px);
+  @include size(310px, 516px);
 
   position: relative;
 

src/styles/layouts/_footer.scss

@@ -8,7 +8,6 @@
 
     padding-top: 116px;
     padding-left: 24px;
-    max-width: 428px;
   }
 
   &__brand-name {
@@ -117,7 +116,6 @@
     &__container {
       display: grid;
       grid-template-columns: 1fr 1fr;
-      max-width: $max-width;
       width: auto;
       column-gap: 10px;
       padding-inline: 10px;

src/styles/layouts/_header.scss

@@ -30,8 +30,6 @@
 @media screen and (min-width: 1020px) {
   .header {
     @include size(auto, auto);
-
-    max-width: $max-width;
   }
 
   .header__container {

src/styles/pages/home/_menu.scss

@@ -12,7 +12,6 @@
     @extend %mr-inline-auto;
 
     padding-top: 110px;
-    max-width: 424px;
   }
 
   &__heading {
@@ -74,10 +73,6 @@
 
 @media screen and (min-width: 600px) {
   .menu {
-    &__container {
-      max-width: $max-width;
-    }
-
     &__heading {
       max-width: 653px;
     }
@@ -128,6 +123,7 @@
       max-width: 1294px;
       column-gap: 18px;
       margin-top: 106px;
+      padding-inline: unset;
     }
   }
 }

src/styles/pages/home/_offer.scss

@@ -1,6 +1,5 @@
 .offer {
   position: relative;
-  max-width: 428px;
   margin-inline: auto;
 
   &__container {
@@ -61,10 +60,8 @@
 
 @media screen and (min-width: 600px) {
   .offer {
-    max-width: $max-width;
-
     &__container {
-      max-width: $max-width;
+      max-width: unset;
     }
 
     &__card-list {

src/styles/pages/home/_platform.scss

@@ -1,20 +1,18 @@
 .platform {
-  &__container {
-    max-width: 428px;
-    margin-inline: auto;
-    padding-top: 26px;
-    padding-bottom: 58px;
-
   background: linear-gradient(
     0,
     rgba(253, 197, 94, 0.15) 0%,
     rgba(253, 197, 94, 0.05) 50%,
     rgba(253, 197, 94, 0) 100%
   );
+  &__container {
+    margin-inline: auto;
+    padding-top: 26px;
+    padding-bottom: 58px;
   }
 
   &__image-container {
-    @include size(auto, 502px);
+    @include size(428px, 502px);
 
     position: relative;
     max-width: 100%;
@@ -81,10 +79,6 @@
 
 @media screen and (min-width: 600px) {
   .platform {
-    &__container {
-      max-width: $max-width;
-    }
-
     &__image-container {
       width: fit-content;
       margin-inline: auto;
@@ -159,7 +153,7 @@
     }
 
     &__image-container {
-      @include size(auto, 632px);
+      @include size(622px, 652px);
 
       padding-top: 20px;
       text-align: right;

src/styles/pages/home/_service.scss

@@ -1,5 +1,4 @@
 .service {
-  max-width: 428px;
   margin-inline: auto;
 
   &__container {
@@ -22,9 +21,10 @@
   }
 
   &__img-container {
+    @include size(406px, 405px);
+
     padding-top: 75px;
     position: relative;
-    width: fit-content;
   }
 
   &__main-img {
@@ -97,8 +97,6 @@
 
 @media screen and (min-width: 600px) {
   .service {
-    max-width: $max-width;
-
     &__img-container {
       margin-inline: auto;
     }

src/styles/pages/home/_welcome.scss

@@ -18,14 +18,13 @@
     @include flex-layout($justify: center, $direction: column);
 
     margin: auto;
-    max-width: 428px;
     padding-top: 67px;
   }
   // Start banner
   &__banner-container {
     @extend %d-flex;
-    @include size(428px, auto);
     @include flex-layout($justify: center, $direction: column);
+    @include size(428px, 417px);
 
     position: relative;
   }
@@ -277,10 +276,12 @@
     }
 
     &__banner-container {
-      width: unset;
+      @include size(auto, auto);
     }
 
     &__main-image {
+      @include size(355px, 417px);
+
       margin-inline: auto;
       position: relative;
       padding-left: 50px;
@@ -343,7 +344,6 @@
 
       padding-top: 130px;
       width: 100%;
-      max-width: $max-width;
     }
 
     // Start content
@@ -430,6 +430,8 @@
     }
 
     &__main-image {
+      @include size(570px, 655px);
+
       padding-right: 29px;
     }