/* Claim, mosaic, how, fit, close. */

.at-claim {
  text-align: center;
  padding: 10rem var(--gutter) 6rem;
}
.at-claim__kicker {
  font-family: 'Source Serif', Georgia, serif;
  font-size: clamp(4.5rem, 14vw, 9rem);
  line-height: 0.82;
  letter-spacing: -0.04em;
}
.at-claim h2 { margin-top: 0.6rem; }

.at-mosaic {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  padding: 7rem var(--gutter) 8rem;
  max-width: 92rem; margin-inline: auto;
}
.at-mosaic h2 {
  grid-column: 1 / -1;
  text-align: center;
  margin: 1rem 0 3rem;
}
.at-pair { position: relative; }
.at-tile { border-radius: 28px; overflow: hidden; }
.at-tile img { width: 100%; height: 100%; object-fit: cover; }
.at-tile--a { aspect-ratio: 4 / 5; }
.at-tile--b { aspect-ratio: 1; }
.at-tile--c { grid-column: 1 / -1; aspect-ratio: 16 / 7; }
.at-tile--d { aspect-ratio: 5 / 4; }
.at-pair:last-of-type { margin-top: 10vh; }

.at-card--a, .at-card--b {
  position: absolute; z-index: 2; width: min(18rem, 70%);
}
.at-card--a { right: -8%; bottom: 8%; }
.at-card--b { left: -8%; top: 10%; }

@media (max-width: 800px) {
  .at-mosaic { grid-template-columns: 1fr; }
  .at-pair:last-of-type { margin-top: 0; }
  .at-card--a, .at-card--b { position: relative; left: 0; right: 0; top: 0; bottom: 0; width: auto; margin-top: -2.5rem; }
  .at-tile--c { aspect-ratio: 16 / 10; }
}

.at-how { padding: 6rem var(--gutter) 4rem; max-width: 68rem; margin-inline: auto; }
.at-how h2 { margin-bottom: 3rem; }
.at-how ol {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem;
}
.at-how li p { margin-top: 0.6rem; color: var(--quiet); }
@media (max-width: 800px) { .at-how ol { grid-template-columns: 1fr; } }

.at-fit {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem;
  padding: 5rem var(--gutter) 8rem;
  max-width: 68rem; margin-inline: auto;
}
.at-fit h3 { font-size: 1.15rem; margin-bottom: 1rem; }
.at-fit li { padding: 0.45rem 0; color: var(--quiet); border-top: 1px solid var(--line); }
.at-fit li:last-child { border-bottom: 1px solid var(--line); }
@media (max-width: 800px) { .at-fit { grid-template-columns: 1fr; } }

.at-close { position: relative; min-height: 100svh; color: var(--white); }
.at-close__media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.at-close__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(7 5 3 / .62), rgb(7 5 3 / .2) 55%, rgb(7 5 3 / .15));
}
.at-close__inner {
  position: relative; z-index: 1;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 6rem var(--gutter) 8rem;
}
.at-close__inner h2 { margin-bottom: 1.6rem; }
.at-close__foot {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 1rem var(--gutter) 1.4rem;
  font-size: 0.85rem;
}
.at-close__foot nav { display: flex; gap: 1.2rem; }
.at-close__foot a:hover { text-decoration: underline; }