/* Homepage lead story: size typography against the card, not the viewport. */
body:not(.admin-page) #news .lead-story {
  align-items: center;
  container-type: inline-size;
  gap: clamp(20px, 3.5cqi, 30px);
  grid-template-areas: "copy media";
  grid-template-columns: minmax(0, 1fr) minmax(176px, 34%);
}

body:not(.admin-page) #news .lead-story > .story-copy {
  grid-area: copy;
  min-width: 0;
}

body:not(.admin-page) #news .lead-story .tag {
  line-height: 1.45;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

body:not(.admin-page) #news .lead-story h3 {
  font-size: clamp(26px, 5cqi, 34px);
  line-height: 1.12;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-wrap: pretty;
  word-break: normal;
}

body:not(.admin-page) #news .lead-story h3 a {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

body:not(.admin-page) #news .lead-story > .lead-story-media {
  grid-area: media;
  max-width: 300px;
  min-width: 0;
}

@media (max-width: 760px) {
  body:not(.admin-page) #news .lead-story {
    gap: 20px;
    grid-template-areas: "copy media";
    grid-template-columns: minmax(0, 1fr) minmax(168px, 35%);
  }

  body:not(.admin-page) #news .lead-story h3 {
    font-size: clamp(25px, 5.4cqi, 32px);
  }
}

@media (max-width: 600px) {
  body:not(.admin-page) #news .lead-story {
    grid-template-areas:
      "copy"
      "media";
    grid-template-columns: 1fr;
  }

  body:not(.admin-page) #news .lead-story > .lead-story-media {
    justify-self: center;
    max-width: 300px;
    width: min(100%, 300px);
  }
}