@charset "UTF-8";
/* ---------- COLORS ---------- */
/* ---------- FONT FAMILIES ---------- */
/* ---------- TYPOGRAPHY ---------- */
/* ---------- CSS CUSTOM PROPERTIES (для runtime-доступа из JS/замеров) ---------- */
:root {
  --c-white: #FFFFFF;
  --c-black: #000000;
  --c-ivory: #F7F1DF;
  --c-light-gray: #FAFAF9;
  --c-gold: #B29261;
  --c-orange: #E60000;
  --ff-display: "Chiswick-stand", "Playfair Display", "Times New Roman", serif;
  --ff-sans: "CaslonDoric-stand", "Figtree", system-ui, -apple-system, sans-serif;
  --ff-script: "Shelley-stand", "Imperial Script", "Great Vibes", cursive;
}

.instagram {
  width: 1440px;
  height: 1644.1875px;
  background: #FFFFFF;
  position: relative;
}
.instagram__heading {
  position: absolute;
  top: 160px;
  left: 483.5px;
  width: 473px;
  font-family: "Chiswick-stand", "Playfair Display", "Times New Roman", serif;
  font-weight: 400;
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: 2px;
  color: #000000;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
}
.instagram__grid {
  position: absolute;
  top: 255px;
  left: 0;
  width: 1440px;
  height: 1229.1875px;
  padding: 0 64px;
  box-sizing: border-box;
}
.instagram__row {
  width: 1312px;
  height: 409.0625px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
}
.instagram__row + .instagram__row {
  margin-top: 1px;
}
.instagram__post {
  width: 327.25px;
  height: 409.0625px;
  background: linear-gradient(135deg, #d9c9a8 0%, #b0946b 50%, #c9a87f 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  /* Figma 512:20536 — 12 raw image fills через REST API (tooling/fetch-figma-rest-batch.mjs).
     Клиент заменит через ACF Repeater `posts[N].image` когда поставит ACF Pro. */
}
.instagram__post.post-1 {
  background-image: url("../../assets/img/instagram/1-1.png");
}
.instagram__post.post-2 {
  background-image: url("../../assets/img/instagram/1-2.png");
}
.instagram__post.post-3 {
  background-image: url("../../assets/img/instagram/1-3.png");
}
.instagram__post.post-4 {
  background-image: url("../../assets/img/instagram/1-4.png");
}
.instagram__post.post-5 {
  background-image: url("../../assets/img/instagram/2-1.png");
}
.instagram__post.post-6 {
  background-image: url("../../assets/img/instagram/2-2.png");
}
.instagram__post.post-7 {
  background-image: url("../../assets/img/instagram/2-3.png");
}
.instagram__post.post-8 {
  background-image: url("../../assets/img/instagram/2-4.png");
}
.instagram__post.post-9 {
  background-image: url("../../assets/img/instagram/3-1.png");
}
.instagram__post.post-10 {
  background-image: url("../../assets/img/instagram/3-2.png");
}
.instagram__post.post-11 {
  background-image: url("../../assets/img/instagram/3-3.png");
}
.instagram__post.post-12 {
  background-image: url("../../assets/img/instagram/3-4.png");
}
.instagram__post::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.12) 100%);
  pointer-events: none;
}
.instagram {
  /* ───── Responsive overrides ───── */
}
@media (max-width: 1023px) {
  .instagram {
    width: 100%;
    height: auto;
    padding: 80px 0 80px;
  }
  .instagram__heading {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0 24px;
    font-size: 28px;
  }
  .instagram__grid {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    padding: 0 24px;
    margin-top: 40px;
  }
  .instagram__row {
    width: 100%;
    height: auto;
    grid-template-columns: repeat(2, 1fr);
  }
  .instagram__post {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1.25;
  }
}
@media (max-width: 479px) {
  .instagram {
    padding: 60px 0 60px;
  }
  .instagram__heading {
    font-size: 22px;
    padding: 0 20px;
  }
  .instagram__grid {
    padding: 0 20px;
    margin-top: 32px;
  }
  .instagram__row {
    grid-template-columns: 1fr;
  }
  .instagram__post {
    aspect-ratio: 1/1;
  }
}