redesign: главная — 2-колоночный contact-grid на desktop (адрес+телефоны слева, карта справа), container 76rem

src/pages/index.astro

@@ -1,6 +1,6 @@
 ---
 import Base from '../layouts/Base.astro';
-import { SITE_TITLE, SITE_TAGLINE, ADDRESS, PHONES, GEO } from '../consts';
+import { SITE_TAGLINE, ADDRESS, PHONES, GEO } from '../consts';
 
 const mapSrc = `https://yandex.ru/map-widget/v1/?ll=${GEO.lon}%2C${GEO.lat}&z=${GEO.zoom}&pt=${GEO.lon}%2C${GEO.lat}%2Cpm2rdm`;
 ---
@@ -20,17 +20,19 @@ const mapSrc = `https://yandex.ru/map-widget/v1/?ll=${GEO.lon}%2C${GEO.lat}&z=${
   <section>
     <div class="container">
       <h2>Мы переехали</h2>
+      <div class="contact-grid">
+        <div class="contact-left">
+          <div>
+            <p class="contact-subhead">Адрес</p>
             <p class="address-block">
               <span class="address-postal">{ADDRESS.postal}</span><br />
               <strong>г. {ADDRESS.region}, {ADDRESS.street}</strong><br />
               {ADDRESS.building}
             </p>
           </div>
-  </section>
 
-  <section class="alt">
+          <div>
-    <div class="container">
+            <p class="contact-subhead">Телефоны</p>
-      <h2>Телефоны</h2>
             <ul class="phones">
               {PHONES.map((p) => (
                 <li>
@@ -44,11 +46,10 @@ const mapSrc = `https://yandex.ru/map-widget/v1/?ll=${GEO.lon}%2C${GEO.lat}&z=${
               ))}
             </ul>
           </div>
-  </section>
+        </div>
 
-  <section>
+        <div class="contact-right">
-    <div class="container">
+          <p class="contact-subhead">Как нас найти</p>
-      <h2>Как нас найти</h2>
           <div class="map-wrap">
             <iframe
               src={mapSrc}
@@ -59,5 +60,7 @@ const mapSrc = `https://yandex.ru/map-widget/v1/?ll=${GEO.lon}%2C${GEO.lat}&z=${
             ></iframe>
           </div>
         </div>
+      </div>
+    </div>
   </section>
 </Base>

src/styles/global.css

@@ -8,7 +8,7 @@
   --accent: #f5b400; /* янтарный — отсылка к авто-тематике */
   --accent-soft: #d99a00;
   --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
-  --reading-max: 64rem;
+  --reading-max: 76rem;
 }
 
 * { box-sizing: border-box; }
@@ -91,11 +91,31 @@ section h2::before {
   background: var(--accent);
 }
 
+/* ── Контактный блок (2 колонки на desktop) ─────────────────────── */
+.contact-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 2rem;
+  align-items: stretch;
+}
+@media (min-width: 880px) {
+  .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 2.5rem; }
+}
+.contact-left { display: flex; flex-direction: column; gap: 1.75rem; }
+.contact-subhead {
+  font-size: 0.78rem;
+  font-weight: 500;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--ink-soft);
+  margin: 0 0 0.35rem;
+}
+
 /* ── Адрес ──────────────────────────────────────────────────────── */
 .address-block {
-  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
+  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
-  line-height: 1.6;
+  line-height: 1.55;
-  max-width: 40rem;
+  margin: 0;
 }
 .address-block strong { font-weight: 700; }
 .address-postal { color: var(--ink-soft); font-size: 0.92rem; letter-spacing: 0.05em; }
@@ -103,12 +123,13 @@ section h2::before {
 /* ── Телефоны ───────────────────────────────────────────────────── */
 .phones {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+  grid-template-columns: 1fr 1fr;
-  gap: 0.75rem;
+  gap: 0.6rem;
-  margin: 1.5rem 0 0;
+  margin: 0;
   padding: 0;
   list-style: none;
 }
+@media (max-width: 480px) { .phones { grid-template-columns: 1fr; } }
 .phones a {
   display: flex;
   align-items: center;
@@ -132,13 +153,14 @@ section h2::before {
 .map-wrap {
   position: relative;
   width: 100%;
-  aspect-ratio: 16 / 9;
+  min-height: 22rem;
+  height: 100%;
   border: 1px solid var(--rule-strong);
   overflow: hidden;
   background: var(--paper-soft);
 }
-.map-wrap iframe { width: 100%; height: 100%; border: 0; }
+.map-wrap iframe { width: 100%; height: 100%; min-height: 22rem; border: 0; display: block; }
-@media (max-width: 640px) { .map-wrap { aspect-ratio: 4 / 3; } }
+@media (max-width: 879px) { .map-wrap { aspect-ratio: 4 / 3; min-height: 0; height: auto; } }
 
 /* ── Footer ─────────────────────────────────────────────────────── */
 .site-footer {