index.html styles.css: fix the image on the left in the hero-section

index.html

@@ -43,25 +43,26 @@
       <a href="https://gitlab.eterfund.ru/ximperlinux" class="social-icon"><i class="fab fa-gitlab"></i></a>
     </div>
   </header>
-  
+
   <main>
     <div id="hero-section">
-      <div class="hero-image">
-        <img src="images/top_ximper.png" alt="logo">
-          </div>
-            <div class="hero-text">
-              <h2>Ximper Linux</h2>
-              <p>Для тех, кто требует от системы всего и сразу: современный дизайн, высокая скорость и уверенность в завтрашнем дне. Построен на отложенном репозитории ALT Sisyphus и гарантирует стабильность.</p>
+      <div class="hero-content-wrapper">
+        <div class="hero-image">
+          <img src="images/top_ximper.png" alt="logo">
         </div>
-        
-        <button id="next-section" class="button outline">Узнать больше</button>
-        <div class="arrows">
-          <span class="arrow"></span>
-          <span class="arrow"></span>
-          <span class="arrow"></span>
+        <div class="hero-text">
+          <h2>Ximper Linux</h2>
+          <p>Для тех, кто требует от системы всего и сразу: современный дизайн, высокая скорость и уверенность в завтрашнем дне. Построен на отложенном репозитории ALT Sisyphus и гарантирует стабильность.</p>
         </div>
       </div>
+      <button id="next-section" class="button outline">Узнать больше</button>
+      <div class="arrows">
+        <span class="arrow"></span>
+        <span class="arrow"></span>
+        <span class="arrow"></span>
+      </div>
     </div>
+
     <div id="blocks-text">
       <h1>Возможности и удобства</h1>
         <hr class="text-hr">
@@ -123,7 +124,7 @@
           <button id="next-section" class="button_download">Перейти в загрузки</button>
         </div>
       </div>
-      
+
       <div class="distro-variant">
         <div class="distro-image">
           <img src="images/mock_hyprland.png" alt="Ximper Linux Hyprland">
@@ -150,7 +151,7 @@
   <footer>
     <div class="footer-left">
       <p id="contact-info">© ООО «Этерсофт». Санкт-Петербург <a href="license.html" id="license-link">Лицензионное соглашение</a></p>
-      
+
     </div>
     <div class="footer-center">
     </div>

styles.css

@@ -410,44 +410,56 @@ header h1 {
 /* Стили для основного контента */
 main {
   flex: 1;
-  /*  padding-bottom: 20px; */
   padding: 0px 10% 20px 10%;
   position: relative;
   margin-top: 80px;
-
 }
 
+/* Обновленные стили для hero-section */
 #hero-section {
   display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   background-image: url("images/head.png");
   background-repeat: no-repeat;
   background-size: cover;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  height: 100vh;
+  min-height: 100vh;
   text-align: left;
   position: relative;
   margin-top: -20px;
   overflow: hidden;
+  padding: 0 10%;
+}
+
+.hero-content-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
 }
 
 .hero-image {
+  flex: 0 0 45%;
+  max-width: 45%;
   display: flex;
-  flex-wrap: nowrap;
-  margin-bottom: 20px;
-  width: auto;
+  justify-content: center;
+  align-items: center;
 }
+
 .hero-image img {
-  max-width: 50%;
-  padding: 20px 0;
+  max-width: 100%;
   height: auto;
   border-radius: 15px;
 }
 
 .hero-text {
-
-  max-width: 60%;
+  flex: 0 0 50%;
+  max-width: 50%;
+  padding-left: 5%;
 }
 
 .hero-text h2 {
@@ -520,6 +532,54 @@ main {
   border-radius: 10px;
 }
 
+/* Адаптация для планшетов */
+@media (max-width: 1024px) {
+  #hero-section {
+    flex-direction: column;
+    justify-content: center;
+    padding: 0 5%;
+  }
+
+  .hero-content-wrapper {
+    flex-direction: column;
+  }
+
+  .hero-image,
+  .hero-text {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+
+  .hero-image img {
+    max-width: 70%;
+    margin-bottom: 30px;
+  }
+
+  .hero-text {
+    padding-left: 0;
+    text-align: center;
+  }
+}
+
+/* Адаптация для мобильных устройств */
+@media (max-width: 768px) {
+  #hero-section {
+    padding: 0 20px;
+  }
+
+  .hero-image img {
+    max-width: 90%;
+  }
+
+  .hero-text h2 {
+    font-size: 36px;
+  }
+
+  .hero-text p {
+    font-size: 16px;
+  }
+}
+
 /* Контейнер с преимуществами */
 #blocks-section {
   display: grid;
@@ -631,7 +691,7 @@ main {
   .info-block h3 {
     font-size: 1.2em;
   }
-  
+
   main {
   padding: 0px 0% 20px 0% !important;
 }
@@ -1190,7 +1250,6 @@ footer {
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
-  max-widch:
 }
 
 .distro-variant {
@@ -1321,4 +1380,3 @@ footer {
     height: 100%;
 }
 }
-