/* =========================================
   DV2 About Page — Responsive Queries
   Aligned with global rem-based system
========================================= */

/* LG - small laptops (≤1152px) */
@media (max-width: 72rem) {

    html {
        font-size: 56.25%;
        /* 9px / 16px = 56.25% */
    }

  .first-about-grid-container {
    column-gap: 4rem;
    row-gap: 5rem;
  }

  .first-about-img {
    max-width: 480px;
  }
}

/* MD - tablets (≤816px) — KEEP 2 columns, just tighten spacing */
@media (max-width: 51rem) {

    html {
        font-size: 50%;
        /* 8px / 16px = 50% */
    }

  .first-about-grid-container {
    column-gap: 3rem;
    row-gap: 4rem;
  }

  .first-about-img {
    max-width: 420px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  }

  /* Give text a bit more room */
  .first-about-grid-container > div {
    max-width: 70ch;
  }

  .dv2-about-hero {
    padding-top: 6rem;
    padding-bottom: 4rem;
  }
}

/* SM - phone landscape (≤688px) — STILL 2 columns, tighter */
@media (max-width: 43rem) {

    html {
        font-size: 43.75%;
        /* 7px / 16px = 43.75% */
    }

  .first-about-grid-container {
    column-gap: 2rem;
    row-gap: 3.5rem;
    padding: 0 1.5rem;
  }

  .first-about-img {
    max-width: 360px;
  }
}

/* XS - phone portrait (≤544px) — NOW collapse to 1 column */
@media (max-width: 34rem) {

    html {
        font-size: 37.5%;
        /* 6px / 16px = 37.5 */
    }

  .first-about-grid-container {
    grid-template-columns: 1fr;
    row-gap: 4rem;

    /* prevent any dense repacking in 1 col */
    grid-auto-flow: row;
  }

  /* Reset explicit column pairing */
  .first-about-img,
  .first-about-img-swop-order-2,
  .first-about-img-swop-order-4,
  .first-about-img-swop-order-2 + div,
  .first-about-img-swop-order-4 + div {
    grid-column: auto;
  }

  /* Full-width reading */
  .first-about-grid-container > div {
    max-width: 100%;
    width: 100%;
  }

  .first-about-img {
    max-width: 100%;
  }
}