/* =========================================================
   news — per-section mobile rules.
   Loaded after responsive.css, which has already flattened the
   absolute grid; this file only rebuilds the pieces that need
   a shape of their own.
   ========================================================= */

@media (max-width: 1279px){

  /* responsive.css gives every .hero a full viewport, which earns its
     keep on the four pages with a full-bleed photograph. This one is a
     breadcrumb and a word: a whole screen of black above the first card
     is just a scroll tax. */
  /* `body .hero` to match the specificity of responsive.css:100, which is
     a later-loaded (0,1,1); a bare `.hero` loses even with !important. */
  body .hero{
    min-height: 0 !important;
    padding-top: 13rem !important;
    padding-bottom: 2rem !important;
    gap: 1.2rem;
  }

  .pg__title{ font-size: 5.6rem !important; line-height: 1 !important; }
  .crumbs{ gap: .8rem; }

  /* ---------- the grid ---------- */

  .nws{
    display: flex !important;
    flex-direction: column;
    gap: .8rem;
    width: 100% !important;
  }

  .nwc{
    display: grid !important;
    grid-template-columns: 9rem 1fr;
    column-gap: 2rem;
    align-items: center;
    padding: 1.8rem 1.8rem 1.8rem 0;
  }
  .nwc__img{
    width: 9rem !important;
    height: 14rem !important;
    align-self: stretch;
  }
  .nwc__meta{ grid-column: 2; margin-bottom: .8rem; }
  .nwc__h{
    grid-column: 2;
    width: auto !important;
    font-size: 1.8rem !important;
    line-height: 1.3 !important;
  }
}

@media (max-width: 767px){

  .pg__title{ font-size: 4.4rem !important; }

  .nwc{ grid-template-columns: 7.6rem 1fr; column-gap: 1.4rem; }
  .nwc__img{ width: 7.6rem !important; height: 12rem !important; }
  .nwc__h{ font-size: 1.6rem !important; }
}