@media (min-width: 640px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .category-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .team-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .featured {
    grid-template-columns: 1.15fr 0.85fr;
  }

  .featured__media {
    min-height: 24rem;
  }

  .split {
    grid-template-columns: 1fr 1fr;
  }

  .split--reverse .split__media {
    order: 2;
  }

  .manifest__grid {
    grid-template-columns: 1.15fr 0.85fr;
    grid-template-rows: auto auto auto;
    column-gap: var(--space-7);
    row-gap: var(--space-6);
  }

  .manifest__title {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    padding-bottom: var(--space-2);
  }

  .manifest__media--primary {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: stretch;
    min-height: 22rem;
    margin-top: var(--space-8);
  }

  .manifest__media--secondary {
    grid-column: 1;
    grid-row: 2;
    max-width: none;
    width: min(100%, 22rem);
    aspect-ratio: 4 / 3;
  }

  .manifest__meta {
    grid-column: 1;
    grid-row: 3;
    margin-top: var(--space-2);
  }

  .contact-grid {
    grid-template-columns: 0.9fr 1.1fr;
  }

  .author-card {
    grid-template-columns: auto 1fr;
    align-items: center;
  }

  .site-footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  }

  .cta-band {
    padding: var(--space-9);
  }
}

@media (min-width: 1024px) {
  .menu-toggle {
    display: none;
  }

  .nav-desktop {
    display: flex;
  }

  .header-cta {
    display: inline-flex;
  }

  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .category-strip {
    grid-template-columns: repeat(3, 1fr);
  }

  .category-strip--four {
    grid-template-columns: repeat(4, 1fr);
  }

  .team-grid {
    grid-template-columns: repeat(3, minmax(0, 22rem));
  }

  .related-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .hero__content {
    padding-bottom: var(--space-9);
  }

  .hero__title {
    max-width: 9ch;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .category-strip--four {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1280px) {
  .container {
    width: min(100% - 4rem, var(--container-width));
  }

  .site-header__inner,
  .hero__content,
  .hero__footer,
  .page-hero__inner {
    width: min(100% - 4rem, var(--container-wide));
  }

  .featured {
    gap: var(--space-8);
  }

  .manifest {
    padding-block: var(--space-10) var(--space-9);
  }

  .manifest__grid {
    column-gap: var(--space-8);
    row-gap: var(--space-7);
  }

  .manifest__title {
    font-size: clamp(2.6rem, 3.4vw, 3.75rem);
    max-width: 16ch;
  }

  .manifest__media--primary {
    margin-top: var(--space-10);
    min-height: 26rem;
  }

  .manifest__media--secondary {
    width: min(100%, 26rem);
  }
}

@media (max-width: 767px) {
  .section {
    padding-block: var(--space-8);
  }

  .section__title {
    max-width: 12ch;
  }

  .manifest {
    padding-block: var(--space-8);
  }

  .manifest__title {
    max-width: none;
    font-size: clamp(1.55rem, 7.2vw, 2.1rem);
  }

  .manifest__media--secondary {
    max-width: none;
  }

  .hero {
    min-height: 100svh;
  }

  .hero__title {
    font-size: clamp(2.8rem, 14vw, 4.2rem);
  }

  .hero__footer {
    align-items: center;
  }

  .scroll-cue__bar {
    width: 3.5rem;
  }

  .page-hero h1 {
    max-width: 14ch;
  }

  .cookie-banner {
    inset-inline: auto;
    right: var(--space-3);
    left: var(--space-3);
    bottom: var(--space-3);
    width: auto;
    max-width: none;
  }
}

@media (max-width: 374px) {
  .container,
  .site-header__inner,
  .hero__content,
  .hero__footer,
  .page-hero__inner {
    width: min(100% - 1.5rem, var(--container-width));
  }

  .brand__tag {
    display: none;
  }

  .btn {
    width: 100%;
  }

  .cookie-banner__actions {
    flex-direction: column;
  }
}

@media (min-width: 1440px) {
  .hero__text {
    font-size: var(--fs-lg);
  }
}

@media (min-width: 1920px) {
  :root {
    --fs-hero: 8rem;
  }
}