add adaptive for graduation page

parts/landings/graduation/callback.php

@@ -7,10 +7,10 @@
     
 		<form action="<?php echo admin_url('admin-ajax.php?action=graduation_callback')?>" method="POST">
 			<label>
-				<input type="text" placeholder="Введите телефон" id="phone">
+				<input type="text" placeholder="Имя" id="name">
 			</label>
-			<label>
+      <label>
-				<input type="text" placeholder="Введите ФИО" id="name">
+				<input type="text" placeholder="Телефон" id="phone">
 			</label>
 			<button class="graduation-btn" id="callback-btn">Отправить</button>
 		</form>

parts/landings/graduation/description.php

@@ -1,8 +1,8 @@
 <div class="description">
   <div class="description_layout">
     <div class="description_text">
-      <h2>На нашем детском выпускном все будет по-взрослому:<br>девочки в платьях, мальчики в костюмах, официальная и игровая части и диплом выпускника Armanty, как вишенка на торте.</h2>
+      <h2>Выпускной для детей, оканчивающих садик или <br> начальную школу</h2>
-      <p>Выпускной для детей, оканчивающих садик или <br> начальную школу</p>
+      <p>На нашем детском выпускном все будет по-взрослому:<br>девочки в платьях, мальчики в костюмах, официальная и игровая части и диплом выпускника Armanty, как вишенка на торте.</p>
     </div>
   </div>
 </div>

parts/landings/graduation/offers.php

@@ -23,7 +23,7 @@
           
           foreach( $posts as $post ){
             setup_postdata($post);?>
-            <div class="col-4 packet">
+            <div class="col-12 col-md-6 col-xl-4 packet">
               <?php 
                 $composition = get_field('graduation_offer_composition');
                 $arr = [];

parts/landings/graduation/top-menu.php

@@ -1,7 +1,7 @@
 <div class="top__menu">
 	<div class="layer"></div>
 	<div class="content">
-		<a href="<?php echo get_home_url() ?>">Назад</a>
+		<a href="<?php echo get_home_url() ?>">На главную</a>
 		<div><i class="fa fa-map-marker" aria-hidden="true"></i> <span>Подольск</span></div>
 	</div>
 </div>

parts/landings/graduation/why.php

@@ -5,7 +5,7 @@
 			<p>Мы делаем все, чтобы у ваших детей был незабываемый выпускной вечер</p>
 		</div>
 		<div class="row icons">
-			<div class="col-3">
+			<div class="col-12 col-sm-6 col-xl-3">
 				<div class="icon">
 					<div class="img-icon"><img src="<?php echo get_template_directory_uri() . '/assets/img/graduation/why/clock.png'?>" alt="clock"></div>
 					<h4>Тщательная подготовка</h4>
@@ -13,7 +13,7 @@
 				</div>
 			</div>
 
-			<div class="col-3">
+			<div class="col-12 col-sm-6 col-xl-3">
 				<div class="icon">
 					<div class="img-icon"><img src="<?php echo get_template_directory_uri() . '/assets/img/graduation/why/rocket.png'?>" alt="rocekt"></div>
 					<h4>Мы в тренде</h4>
@@ -21,14 +21,14 @@
 				</div>
 			</div>
 
-			<div class="col-3">
+			<div class="col-12 col-sm-6 col-xl-3">
 				<div class="icon">
 					<div class="img-icon"><img src="<?php echo get_template_directory_uri() . '/assets/img/graduation/why/label.png'?>" alt="label"></div>
 					<h4>Фиксированная цена</h4>
 					<p>Не будем навязывать вам доплату или дополнительные услуги</p>
 				</div>
 			</div>
-			<div class="col-3">
+			<div class="col-12 col-sm-6 col-xl-3">
 				<div class="icon">
 					<div class="img-icon"><img src="<?php echo get_template_directory_uri() . '/assets/img/graduation/why/medal.png'?>" alt="medal"></div>
 					<h4>Мы в тренде</h4>

php/wordpress/constants.php

@@ -13,6 +13,6 @@
       'img' => get_template_directory_uri() . '/assets/img',
     ];
 
-    $version = '1.0.1';
+    $version = '1.0.5';
   }
 ?>

src/sass/pages/graduation.sass

@@ -96,7 +96,7 @@ main
         font-size: 40px
 
       p
-        padding: 0 50px
+        padding: 0 10px
         font-family: Montserrat;
         font-style: normal
         font-weight: 500
@@ -188,7 +188,7 @@ main
 
           h4
             font-family: Shadow
-            font-size: 16px
+            font-size: 18px
             text-align: center
             margin-top: 40px
             margin-bottom: 16px
@@ -243,7 +243,7 @@ main
 
 .top__menu
   position: fixed
-  height: 26px
+  height: 96px
   top: 0
   left: 0
   right: 0
@@ -287,3 +287,145 @@ main
         font-size: 14px
         margin-left: 10px
 
+@media screen and (max-width: 1366px)
+  .graduation__block.callback
+    background-size: cover
+
+@media screen and (max-width: 1200px)
+  .graduation__block.callback
+    height: 800px
+
+  .description
+    padding: 50px
+
+  .graduation__block
+    padding: 50px 100px
+  
+  .graduation__block.offers 
+    .packet
+      &:nth-child(2), &:nth-child(3)
+        margin-top: 0
+
+  .graduation__block.why .content .icons .icon
+    width: auto
+    margin-bottom: 30px
+    
+    p
+      max-width: 260px
+      margin: 0 auto
+  
+  main .main-information p
+    max-width: 430px
+
+@media screen and (max-width: 768px)
+  .top__menu .content
+    padding: 35px 50px
+
+  main .main-information
+    left: 50px
+    top: 230px
+    
+    h1
+      font-size: 30px
+
+    p
+      font-size: 16px
+      max-width: 300px
+
+  .description .description_layout
+    padding: 37px 20px 37px
+
+  .description .description_text 
+    h2
+      font-size: 18px
+    
+    p
+      font-size: 16px
+
+  .graduation__block .content .headers
+    margin-bottom: 30px
+
+  .graduation__block.offers .graduation__packet
+    margin: 20px auto
+
+@media screen and (max-width: 576px)
+  main .main-information 
+    h1
+      font-size: 23px
+    p
+      font-size: 14px
+
+  .graduation-btn
+    font-size: 14px
+    background-size: contain
+    padding: 20px 30px
+
+  main .main-information p
+    max-width: 230px
+
+  .description .description_text 
+    p
+      display: none
+      font-size: 14px
+    h2
+      font-size: 14px
+      margin-bottom: 0
+
+  .graduation__block.offers .graduation__packet
+    padding: 20px 30px
+
+  .graduation__block.offers .graduation__packet .text
+    padding: 60px 0 80px 0
+
+  .graduation__block.offers .graduation__packet .packet_description
+    margin-top: 20px
+
+  .graduation__block.offers .graduation__packet .packet_description ul li
+    padding-left: 20px
+    font-size: 16px
+
+  .graduation__block.offers .graduation__packet .graduation-btn
+    background-size: contain
+
+  .graduation__block.offers .graduation__packet .text
+    width: auto
+    height: 190px
+    background-size: contain
+
+  .graduation__block.offers .graduation__packet .text h3
+    font-size: 35px
+
+@media screen and (max-width: 500px)
+  .top__menu
+    height: 50px
+
+  .top__menu .content
+    padding: 10px 35px
+
+  .top__menu .content a
+    font-size: 20px
+
+  main .main-information
+    left: 35px
+    top: 130px
+    
+    p
+      max-width: 150px
+    h1
+      max-width: 150px
+      font-size: 23px
+
+  .description
+    padding: 35px
+
+  .description .description_text h2
+    font-size: 18px !important
+
+  .graduation__block
+    padding: 50px 10px
+
+  .graduation__block.callback .content form label
+    max-width: 100%
+
+  .graduation__block.callback
+    height: 600px