Адаптивная сетка

source/sass/base/base.scss

@@ -19,53 +19,3 @@ img {
   max-width: 100%;
   object-fit: contain;
 }
-
-.container {
-  padding: 0 20px;
-}
-
-.title {
-  font-size: 36px;
-  line-height: 40px;
-  font-weight: 400;
-}
-
-.button {
-  display: block;
-  padding: 10px 44px;
-  font-family: "Oswald", "Arial", sans-serif;
-  font-size: 16px;
-  line-height: 20px;
-  color: #ffffff;
-  text-align: center;
-  text-decoration: none;
-  text-transform: uppercase;
-  border: none;
-  background-color: #68b738;
-  cursor: pointer;
-}
-
-.link {
-  color: inherit;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.list {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  border: 0;
-  padding: 0;
-  white-space: nowrap;
-  clip-path: inset(100%);
-  clip: rect(0 0 0 0);
-  overflow: hidden;
-}

source/sass/blocks/additional.scss

@@ -58,3 +58,26 @@
   text-align: center;
   color: #ffffff;
 }
+
+@media (min-width: $tablet-width) {
+  .additional__title {
+    font-size: 36px;
+    border-bottom: none;
+  }
+
+  .additional__item-title {
+    font-size: 20px;
+  }
+}
+
+@media (min-width: $desktop-width) {
+  .additional__content-wrapper {
+    display: flex;
+    justify-content: space-between;
+    gap: 80px;
+  }
+
+  .additional__list {
+    flex-grow: 1;
+  }
+}

source/sass/blocks/advantages.scss

@@ -2,6 +2,36 @@
   margin-bottom: 30px;
 }
 
+.advantages__title {
+  margin-bottom: 40px;
+}
+
 .advantages__list {
   @include text;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+@media (min-width: $tablet-width) {
+  .advantages__title {
+    margin-bottom: 40px;
+  }
+
+  .advantages__list {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 150px;
+  }
+
+  .advantages__item {
+    max-width: 230px;
+  }
+}
+
+@media (min-width: $desktop-width) {
+  .advantages__list {
+    flex-wrap: nowrap;
+    gap: 94px;
+  }
 }

source/sass/blocks/button.scss

@@ -0,0 +1,21 @@
+.button {
+  display: inline-block;
+  padding: 10px 28px;
+  font-family: "Oswald", "Arial", sans-serif;
+  font-size: 16px;
+  line-height: 1.25;
+  color: #ffffff;
+  text-align: center;
+  text-decoration: none;
+  text-transform: uppercase;
+  border: none;
+  background-color: #68b738;
+  cursor: pointer;
+}
+
+@media (min-width: $tablet-width) {
+  .button {
+    font-size: 20px;
+    line-height: 1.3;
+  }
+}

source/sass/blocks/contacts.scss

@@ -1,16 +1,22 @@
 .contacts__text-wrapper {
+  display: flex;
+  justify-content: space-between;
   background-color: $base-color;
   padding-top: 26px;
   padding-bottom: 26px;
 }
 
-.contacts__text-wrapper.contacts__text-wrapper--main {
+.contacts__text-wrapper br {
+  display: none;
+}
+
+.contacts__text-wrapper--main {
   background-color: #ffffff;
 }
 
 .contacts__title {
   font-size: 16px;
-  line-height: 20px;
+  line-height: 1.25;
   text-transform: uppercase;
   color: #111111;
 }
@@ -19,3 +25,37 @@
   @include text;
   line-height: 20px;
 }
+
+@media (min-width: $tablet-width) {
+  .contacts__text-wrapper {
+    padding: 60px 70px;
+  }
+
+  .contacts__text-wrapper br {
+    display: block;
+  }
+
+  .contacts__title {
+    max-width: 220px;
+    font-size: 20px;
+    line-height: 1.3;
+  }
+
+  .contacts__text {
+    max-width: 190px;
+    text-align: right;
+    line-height: 20px;
+  }
+}
+
+@media (min-width: $desktop-width) {
+  .contacts__text-wrapper {
+    max-width: 565px;
+    padding-left: 80px;
+    padding-right: 78px;
+  }
+
+  .contacts__text {
+    text-align: left;
+  }
+}

source/sass/blocks/container.scss

@@ -0,0 +1,15 @@
+.container {
+  padding: 0 20px;
+}
+
+@media (min-width: $tablet-width) {
+  .container {
+    padding: 0 30px;
+  }
+}
+
+@media (min-width: $desktop-width) {
+  .container {
+    padding: 0 110px;
+  }
+}

source/sass/blocks/copyright.scss

@@ -1,3 +1,8 @@
+.copyright {
+  display: flex;
+  justify-content: space-between;
+}
+
 .copyright__link {
   @include text;
   font-size: 16px;

source/sass/blocks/example.scss

@@ -4,10 +4,19 @@
   background-color: $base-color;
 }
 
+.example__title {
+  margin-bottom: 40px;
+}
+
 .example__text {
   @include text;
 }
 
+.example__list {
+  display: flex;
+  justify-content: space-between;
+}
+
 .example__item {
   text-align: center;
 }
@@ -24,8 +33,61 @@
 }
 
 .example__total {
+  display: flex;
+  justify-content: center;
   font-size: 14px;
   line-height: 20px;
   text-align: center;
   text-transform: uppercase;
 }
+
+@media (min-width: $tablet-width) {
+  .example__costs-wrapper {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .example__list {
+    gap: 43px;
+  }
+
+  .example__value {
+    font-size: 30px;
+    line-height: 37px;
+  }
+
+  .example__description {
+    font-size: 14px;
+  }
+
+  .example__total {
+    flex-direction: column;
+    align-items: end;
+    font-size: 20px;
+  }
+}
+
+@media (min-width: $desktop-width) {
+  .example__wrapper {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .example__content-wrapper {
+    max-width: 435px;
+  }
+
+  .example__costs-wrapper {
+    flex-direction: column;
+  }
+
+  .example__list {
+    justify-content: start;
+  }
+
+  .example__total {
+    flex-direction: row;
+    justify-content: start;
+    gap: 63px;
+  }
+}

source/sass/blocks/hero.scss

@@ -30,3 +30,49 @@
   line-height: 1;
   text-transform: uppercase;
 }
+
+.hero__link.button {
+  width: 100%;
+}
+
+@media (min-width: $tablet-width) {
+  .hero {
+    text-align: left;
+    color: #000000;
+  }
+
+  .hero::before {
+    display: none;
+  }
+
+  .hero__wrapper {
+    padding-left: 120px;
+    padding-right: 0;
+    max-width: 600px;
+  }
+
+  .hero__title {
+    font-size: 60px;
+  }
+
+  .hero__slogan {
+    font-size: 20px;
+  }
+
+  .hero__link.button {
+    width: unset;
+  }
+}
+
+@media (min-width: $desktop-width) {
+  .hero::before {
+    display: block;
+    top: unset;
+    left: unset;
+    right: 0;
+    bottom: 0;
+    width: 50%;
+    height: 118%;
+    background-size: 100%;
+  }
+}

source/sass/blocks/link.scss

@@ -0,0 +1,5 @@
+.link {
+  color: inherit;
+  text-decoration: none;
+  cursor: pointer;
+}

source/sass/blocks/list.scss

@@ -0,0 +1,5 @@
+.list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}

source/sass/blocks/main-footer.scss

@@ -0,0 +1,20 @@
+.main-footer__bottom-wrapper {
+  display: flex;
+  flex-direction: column;
+  background-color: $base-color;
+}
+
+.main-footer__logo {
+  margin: 0 auto;
+}
+
+@media (min-width: $tablet-width) {
+  .main-footer__bottom-wrapper {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .main-footer__logo {
+    margin: 0;
+  }
+}