htmlacademy-adaptive · keksobot · Feb 9, 2026 · Feb 9, 2026
diff --git a/source/index.html b/source/index.html
@@ -61,13 +61,13 @@ <h1 class="banner__title section-title section-title--contrast">Функцион
     <section class="page__modules page__centerer modules" data-test="programs">
       <h2 class="visually-hidden">Виды программ</h2>
       <ul class="modules__list">
-        <li class="modules__item card">
-          <h3 class="card__title card__title--slim">Похудение</h3>
+        <li class="modules__item card card--slim">
+          <h3 class="card__title">Похудение</h3>
           <p class="card__text">Ваш кот весит больше собаки и почти утратил способность лазить по деревьям? Пора на диету! Cat Energy Slim поможет вашему питомцу сбросить лишний вес.</p>
           <a class="card__link" href="#">Каталог Slim</a>
         </li>
-        <li class="modules__item card">
-          <h3 class="card__title card__title--pro">Набор массы</h3>
+        <li class="modules__item card card--pro">
+          <h3 class="card__title">Набор массы</h3>
           <p class="card__text">Заработать авторитет среди дворовых котов и даже собак? Серия Cat Energy Pro поможет вашему коту нарастить необходимые мышцы!</p>
           <a class="card__link" href="#">Каталог Pro</a>
         </li>

diff --git a/source/styles/blocks/card.scss b/source/styles/blocks/card.scss
@@ -5,7 +5,7 @@
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
-  padding: 24px 20px 0;
+  padding: 30px 20px 22px;
 
   background-color: $bg-color-lighten;
 
@@ -15,68 +15,39 @@
   }
 
   @media (width >= #{$desktop-width}) {
-    padding: 47px 50px 37px 52px;
-  }
-}
-
-.card__title {
-  position: relative;
-
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-
-  margin: 0 0 22px;
-  font-family: $accent-font;
-  font-weight: 400;
-  font-size: 24px;
-  line-height: 37px;
-  text-transform: uppercase;
-  color: $text-color-accent;
-
-  @media (#{$tablet-width} <= width < #{$desktop-width}) {
-    position: static;
-  }
-
-  @media (width >= #{$tablet-width}) {
-    margin-bottom: 25px;
-
-    font-size: 36px;
-    line-height: 36px;
-  }
-
-  @media (width >= #{$desktop-width}) {
-    margin-bottom: 40px;
+    padding: 77px 50px 37px 52px;
   }
 
   &::before {
     --module-card-icon-size: 50px;
 
     content: "";
 
-    flex-shrink: 1;
+    position: absolute;
+    top: 24px;
+    left: 20px;
+
     display: block;
     width: var(--module-card-icon-size);
     height: var(--module-card-icon-size);
-    margin-right: 18px;
     border-radius: 50%;
 
     background-color: $bg-color-accent;
 
-    @media (#{$tablet-width} <= width < #{$desktop-width}) {
+    @media (width >= #{$tablet-width}) {
       --module-card-icon-size: 200px;
 
-      position: absolute;
-      top: 90px;
-      right: 62px;
-
-      margin-right: 0;
+      top: 92px;
+      left: initial;
+      right: 64px;
     }
 
     @media (width >= #{$desktop-width}) {
       --module-card-icon-size: 100px;
 
-      margin-right: 62px;
+      top: 47px;
+      left: 53px;
+      right: initial;
     }
   }
 
@@ -94,24 +65,25 @@
   &--slim::after {
     --module-icon: url("../../icons/stack.svg#cat-slim");
 
-    top: -3px;
-    left: 7px;
+    top: 21px;
+    left: 27px;
 
     width: 36px;
     height: 50px;
 
-    @media (#{$tablet-width} <= width < #{$desktop-width}) {
+    @media (width >= #{$tablet-width}) {
       top: 81px;
-      right: 92px;
+      right: 94px;
       left: initial;
 
       width: 140px;
       height: 194px;
     }
 
     @media (width >= #{$desktop-width}) {
-      top: -6px;
-      left: 15px;
+      top: 41px;
+      left: 68px;
+      right: initial;
 
       width: 70px;
       height: 97px;
@@ -121,8 +93,8 @@
   &--pro::after {
     --module-icon: url("../../icons/stack.svg#cat-pro");
 
-    top: 11px;
-    left: -10px;
+    top: 35px;
+    left: 12px;
 
     width: 67px;
     height: 28px;
@@ -137,21 +109,73 @@
     }
 
     @media (width >= #{$desktop-width}) {
-      top: 20px;
-      left: -19px;
+      top: 67px;
+      left: 34px;
+      right: initial;
 
       width: 134px;
       height: 56px;
     }
   }
 }
 
+.card__title {
+  margin: 0 0 29px;
+  padding-left: 71px;
+
+  font-family: $accent-font;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 37px;
+  text-transform: uppercase;
+  color: $text-color-accent;
+
+  @media (width >= #{$tablet-width}) {
+    margin-bottom: 25px;
+    padding-left: 0;
+
+    font-size: 36px;
+    line-height: 36px;
+  }
+
+  @media (width >= #{$desktop-width}) {
+    margin-bottom: 74px;
+    padding-left: 162px;
+  }
+}
+
 .card__text {
+  position: relative;
+
   margin: 0 0 22px;
 
   font-family: $main-font;
   color: $text-color-main;
 
+  &:not(:last-of-type) {
+    margin-bottom: 1em;
+  }
+
+  &:last-of-type {
+    margin-bottom: 42px;
+  }
+
+  @media (width < #{$tablet-width}) {
+    &:last-of-type::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: -23px;
+
+      display: block;
+      width: 100%;
+      height: 1px;
+
+      background-color: $border-color-dark;
+    }
+  }
+
   @media (#{$tablet-width} <= width < #{$desktop-width}) {
     margin-bottom: 33px;
   }
@@ -162,12 +186,12 @@
 }
 
 .card__link {
-  align-self: flex-start;
-  display: flex;
+  display: grid;
+  grid-template-columns: auto 32px;
+  justify-content: start;
   align-items: center;
-  width: 100%;
-  padding: 19px 0 22px;
-  border-top: 1px solid $border-color-dark;
+  gap: 15px;
+  width: fit-content;
 
   font-family: $accent-font;
   font-weight: 400;
@@ -187,6 +211,10 @@
     line-height: 30px;
   }
 
+  @media (width >= #{$desktop-width}) {
+    gap: 25px;
+  }
+
   &:active {
     opacity: 0.3;
   }
@@ -197,15 +225,10 @@
     display: block;
     width: 32px;
     height: 11px;
-    margin-left: 15px;
 
     background: $text-color-accent;
     mask: url("../../icons/stack.svg#arrow") no-repeat -8px center / 32px 11px;
     transition: 0.08s linear all;
-
-    @media (width >= #{$tablet-width}) {
-      margin-left: 25px;
-    }
   }
 
   &:hover::after,

diff --git a/source/styles/blocks/catalog-list.scss b/source/styles/blocks/catalog-list.scss
@@ -9,7 +9,7 @@
   }
 
   @media (width >= #{$desktop-width}) {
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(4, 245px);
     gap: 73px 80px;
   }
 }
diff --git a/source/styles/blocks/form.scss b/source/styles/blocks/form.scss
@@ -7,6 +7,7 @@
 
   @media (width >= #{$tablet-width}) {
     grid-template-columns: 59.5% 1fr;
+    grid-template-rows: minmax(56px, auto);
     gap: 0;
   }
 

diff --git a/source/styles/blocks/page-title.scss b/source/styles/blocks/page-title.scss
@@ -15,6 +15,6 @@
   }
 
   @media (width >= #{$desktop-width}) {
-    padding-top: 53px;
+    padding-top: 43px;
   }
 }
diff --git a/source/styles/blocks/page.scss b/source/styles/blocks/page.scss
@@ -47,10 +47,10 @@
 
 .page__header {
   display: grid;
-  grid-template-rows: 65px;
+  grid-template-rows: minmax(65px, auto);
 
   @media (width >= #{$tablet-width}) {
-    grid-template-rows: 50px;
+    grid-template-rows: minmax(50px, auto);
   }
 
   @media (width >= #{$desktop-width}) {

diff --git a/source/styles/blocks/parameters-list.scss b/source/styles/blocks/parameters-list.scss
@@ -13,7 +13,8 @@
 }
 
 .parameters-list__item {
-  display: flex;
+  display: grid;
+  grid-template-columns: 50% 50%;
   justify-content: space-between;
   align-items: center;
   width: 100%;
@@ -55,3 +56,12 @@
     }
   }
 }
+
+.parameters-list__name {
+  text-align: left;
+}
+
+.parameters-list__value {
+  margin: 0;
+  text-align: right;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,6 +7,7 @@ @@
       @media (width >= #{$tablet-width}) {
         grid-template-columns: 59.5% 1fr;
+        grid-template-rows: minmax(56px, auto);
         gap: 0;
       }
@@ Expand Down @@