@layer celestia {
  @media (max-width: 1080px) {
    .celestia-hero__grid,
    .celestia-statement,
    .celestia-structure {
      grid-template-columns: 1fr;
    }

    .celestia-hero__grid {
      grid-template-areas:
        "copy"
        "summary";
    }

    .celestia-hero__orbit {
      display: none;
    }

    .celestia-summary {
      margin-block-start: 0;
      transform: none;
    }

    .celestia-product-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

  }

  @media (max-width: 760px) {
    .celestia-product-grid {
      grid-template-columns: 1fr;
    }

    .celestia-summary__row {
      grid-template-columns: 1fr;
      gap: 0.45rem;
    }

    .celestia-structure-map__grid {
      grid-template-columns: 1fr;
    }

  }

  @media (max-width: 640px) {
    .celestia-hero {
      min-height: 0;
      padding-block: 1.05rem 1.7rem;
    }

    .celestia-hero__grid {
      display: block;
    }

    .celestia-hero__copy {
      gap: 0.92rem;
    }

    .celestia-page .eyebrow {
      max-width: 100%;
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.13em;
      line-height: 1.35;
    }

    .celestia-page .eyebrow::after {
      width: 1.35rem;
      margin-block-start: 1.18rem;
    }

    .celestia-hero h1 {
      width: min(100%, 22rem);
      font-size: 2.08rem;
      line-height: 1.04;
      text-wrap: balance;
    }

    .celestia-hero__narrative .lead {
      max-width: 21rem;
      font-size: 0.9rem;
      line-height: 1.58;
    }

    .celestia-hero__context {
      max-width: 22rem;
      margin-block-start: 0.1rem;
      padding-block-start: 0.8rem;
      font-size: 0.84rem;
      line-height: 1.58;
    }

    .celestia-page-nav,
    .celestia-hero__orbit,
    .celestia-summary {
      display: none;
    }

    .celestia-hero__copy {
      max-width: none;
    }

    .celestia-mobile-nav {
      margin-block-start: 1.55rem;
    }

    .celestia-section-copy h2,
    .celestia-structure__copy h2,
    .celestia-products__head h2 {
      max-width: 12.8em;
      font-size: 2rem;
      line-height: 1.13;
    }

    .celestia-list article {
      grid-template-columns: 3rem 1fr;
      gap: 1rem;
    }

    .celestia-list__icon {
      width: 3rem;
    }

    .celestia-summary,
    .celestia-structure-map,
    .celestia-deep-panel {
      padding: 1.15rem;
    }

    .celestia-product-card {
      min-height: 26rem;
    }
  }
}