/**
 * Destinations.
 *
 * `.dark-band`, `.grid`/`.grid--3`, `.card`, `.card--lift` and `.card__media`
 * carry the band and the light cards on the navy ground. Four small additions.
 *
 * ONE OF THEM IS NOT COSMETIC. `.dark-band h2, .dark-band h3` paints headings
 * white for the navy ground, and it reaches straight through the white card
 * into the country name, because the kit's own `.card h3` sets a font-size and
 * no colour – so nothing puts the heading back. The result is the country name
 * in white on the card's white paper, which is what the review found. Only the
 * heading is affected: `.card p` sits later in pages.css than `.dark-band p`
 * and wins the tie, so the blurb was always correct.
 */

.destination-grid__head {
  max-inline-size: var(--container-width);
  margin-inline: auto;
  margin-block-end: var(--s-5);
}

/* The country name. Two classes plus an element, so it outranks the kit's
   `.dark-band h3`, and --navy is the heading colour base.css gives every h1–h4
   in the first place. 14.36:1 on --paper. */
.destination-grid .card h3 {
  color: var(--navy);
}

/* The flag sits with the country name rather than in a tile of its own, so it
   is sized against the heading instead of the kit's 52px job-row flag. */
.destination-grid__flag {
  margin-inline-end: 0.4em;
  font-size: 1.1em;
  line-height: 1;
}

.destination-grid__note {
  max-inline-size: var(--container-width);
  margin-inline: auto;
  margin-block-start: var(--s-4);
  font-size: var(--text-xs);
  color: var(--on-dark-muted);
  text-align: center;
}