Update About section images and enhance styling: Replaced image URLs with new assets, added fixed dimensions for grid images, and implemented responsive height adjustments for better layout across various screen sizes.

src/components/About.astro

@@ -4,10 +4,10 @@ const about = {
   title: "О НАС",
   paragraph1: "Наша компания занимается производством продукции из драгоценных металлов.",
   imageUrls: [
-    "/images/hero.webp",
-    "/images/hero.webp",
-    "/images/hero.webp",
-    "/images/hero.webp"
+    "/images/1.jpg",
+    "/images/12.jpg",
+    "/images/123.jpg",
+    "/images/1234.jpg"
   ]
 };
 ---
@@ -56,11 +56,11 @@ const about = {
     <div class="lg:w-1/2 grid grid-cols-2 gap-3 xs:gap-4 sm:gap-6">
       {
         about.imageUrls.map((imageUrl, index) => (
-          <div class="group relative overflow-hidden rounded-xl xs:rounded-2xl shadow-2xl hover:shadow-yellow-500/20 transition-all duration-500 transform hover:scale-105">
+          <div class="group relative overflow-hidden rounded-xl xs:rounded-2xl shadow-2xl hover:shadow-yellow-500/20 transition-all duration-500 transform hover:scale-105 h-32 xs:h-36 sm:h-40 md:h-44 lg:h-48 xl:h-52">
             <img
               src={imageUrl}
               alt={`О нас изображение ${index + 1}`}
-              class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
+              class="w-full h-full object-cover object-center transition-transform duration-700 group-hover:scale-110"
             />
             <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
           </div>
@@ -75,8 +75,55 @@ const about = {
     line-height: 1.8;
   }
 
-  img {
-    max-width: 100%;
-    max-height: 100%;
+  /* Фиксированные размеры для изображений в сетке */
+  .grid img {
+    aspect-ratio: 4/3;
+    object-fit: cover;
+    object-position: center;
+    width: 100%;
+    height: 100%;
+  }
+  
+  /* Дополнительные адаптивные стили для изображений */
+  @media (max-width: 320px) {
+    .grid > div {
+      height: 7rem !important;
+    }
+  }
+  
+  @media (min-width: 321px) and (max-width: 479px) {
+    .grid > div {
+      height: 8rem !important;
+    }
+  }
+  
+  @media (min-width: 480px) and (max-width: 639px) {
+    .grid > div {
+      height: 9rem !important;
+    }
+  }
+  
+  @media (min-width: 640px) and (max-width: 767px) {
+    .grid > div {
+      height: 10rem !important;
+    }
+  }
+  
+  @media (min-width: 768px) and (max-width: 1023px) {
+    .grid > div {
+      height: 11rem !important;
+    }
+  }
+  
+  @media (min-width: 1024px) and (max-width: 1279px) {
+    .grid > div {
+      height: 12rem !important;
+    }
+  }
+  
+  @media (min-width: 1280px) {
+    .grid > div {
+      height: 13rem !important;
+    }
   }
 </style>