/* TDN Lead Lockup v1.0.0
   Unlayered so it beats theme cascade layers and TDN Design Polish.
   Homepage .fp-lead only. */

/* Desktop: one rectangle. Photo stretches to the text block
   instead of sitting centered in a short 4:3 hole. */
@media (min-width: 60rem) {
  html body .fp-lead {
    grid-template-columns: minmax(0, 1fr) minmax(22rem, 1.15fr);
    column-gap: clamp(1.25rem, 1rem + 1.5vw, 2rem);
    row-gap: 0;
    align-items: stretch;
  }
  html body .fp-lead__text {
    grid-column: 1;
    grid-row: 1;
    align-content: center;
  }
  html body .fp-lead__art {
    grid-column: 2;
    grid-row: 1;
    order: 0;
    aspect-ratio: auto;
    align-self: stretch;
    min-block-size: 100%;
    border-radius: 0;
  }
  html body .fp-lead__art img {
    inline-size: 100%;
    block-size: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 42%;
  }
}

/* Phone: image first, full-bleed to the page edges. */
@media (max-width: 59.999rem) {
  html body .fp-lead {
    gap: 1rem;
  }
  html body .fp-lead__art {
    order: -1;
    margin-inline: calc(var(--gutter) * -1);
    max-block-size: none;
    aspect-ratio: 16 / 9;
    border-radius: 0;
  }
}