/*
 * Homepage section alignment override.
 * Keep the existing labels and content, but let the label sit above the
 * section body so it no longer consumes a separate horizontal column.
 */
@media (min-width: 721px) {
  /* Keep the homepage hero on the same content rails as the sections below. */
  .hero-content {
    grid-template-columns: 1fr;
  }

  .hero-meta {
    grid-area: 1 / 1;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    width: 100%;
    padding-top: 0;
    display: grid;
  }

  .hero-meta p {
    margin: 0;
    white-space: nowrap;
  }

  .hero-meta p:nth-child(2) {
    text-align: center;
  }

  .hero-meta p:nth-child(3) {
    text-align: right;
  }

  .hero h1,
  .hero-bottom {
    grid-column: 1;
  }

  .numbered-section,
  .miro-section {
    display: block;
  }

  .numbered-section > .section-no,
  .numbered-section > .section-kicker,
  .miro-section > .section-no,
  .miro-section > .section-kicker {
    display: inline-block;
    vertical-align: top;
  }

  .numbered-section > .section-no,
  .miro-section > .section-no {
    width: clamp(72px, 8vw, 110px);
  }

  .numbered-section > .section-body,
  .miro-section > .section-body {
    margin-top: clamp(48px, 4.2vw, 70px);
  }

  .approach-banner {
    padding-left: 3.2vw;
    padding-right: 3.2vw;
  }
}

@media (max-width: 720px) {
  .hero-meta {
    grid-template-columns: auto auto auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    display: grid;
  }

  .hero-meta p {
    margin: 0;
    white-space: nowrap;
  }

  .hero-meta p:nth-child(2) {
    text-align: center;
  }

  .hero-meta p:nth-child(3) {
    display: block;
    text-align: right;
  }
}

@media (min-width: 1181px) {
  .approach-banner {
    padding-left: calc(var(--side-rail) + 16px);
    padding-right: calc(var(--side-rail) + 16px);
  }
}