.site-shell { overflow: clip; }
.container {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
}
.section {
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.section--soft { background: var(--color-surface-soft); }
.section__header {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.grid {
  display: grid;
  gap: var(--space-4);
}
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hero {
  min-height: min(760px, calc(100vh - 74px));
  display: grid;
  align-items: center;
  padding-block: clamp(3rem, 7vw, 5rem);
}
.hero__grid {
  align-items: center;
  display: grid;
  gap: var(--space-7);
  grid-template-columns: minmax(0, .95fr) minmax(280px, 1.05fr);
}
.hero__content { display: grid; gap: var(--space-5); }
.hero__media {
  min-height: 300px;
  display: grid;
  place-items: center;
}
.product-hero {
  background: linear-gradient(180deg, var(--color-surface-soft), var(--color-bg));
  padding-block: clamp(4rem, 8vw, 7rem);
}
.product-hero__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
@media (max-width: 860px) {
  .grid--2, .grid--3, .grid--4, .hero__grid, .product-hero__grid { grid-template-columns: 1fr; }
  h1 { max-width: 12ch; }
}