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

index.html

@@ -46,6 +46,7 @@
 
   <main>
     <div id="hero-section">
+      <div class="hero-content-wrapper">
         <div class="hero-image">
           <img src="images/top_ximper.png" alt="logo">
         </div>
@@ -53,7 +54,7 @@
           <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>
@@ -61,7 +62,7 @@
         <span class="arrow"></span>
       </div>
     </div>
-    </div>
+
     <div id="blocks-text">
       <h1>Возможности и удобства</h1>
         <hr class="text-hr">

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;
@@ -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%;
 }
 }
-