.container {
  width: min(100% - (var(--page-gutter) * 2), var(--container));
  margin-inline: auto;
}

.container--wide {
  width: min(100% - (var(--page-gutter) * 2), var(--wide));
}

.section-shell {
  padding-block: var(--section-gap);
}

.works-grid,
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: clamp(0.55rem, 0.9vw, 0.95rem);
}

.works-grid {
  grid-template-rows: minmax(320px, 0.95fr) minmax(260px, 0.7fr);
  min-height: clamp(720px, 70vw, 1080px);
}

.services-list__inner,
.about-strong__grid,
.portfolio-hero__inner,
.closing-cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(360px, 1.18fr);
  gap: clamp(2rem, 6vw, 7rem);
}

@media (max-width: 960px) {
  .services-list__inner,
  .about-strong__grid,
  .portfolio-hero__inner,
  .closing-cta__inner {
    grid-template-columns: 1fr;
  }

  .works-grid,
  .portfolio-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .section-shell {
    padding-block: clamp(3.8rem, 15vw, 6.2rem);
  }

  .works-grid,
  .portfolio-grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }
}