/* Destinations main, Figma 19:3611. Region sections alternate sand / white, starting sand
   (the hero shares the first one's ground). Cards 355x477 with a bottom scrim and the name in Saol. */
.dest-hero { background: var(--color-sand); padding-top: var(--space-section); }
.dest-hero__title { margin: 0; text-align: center; color: var(--color-ink); }
.dest-hero__bar { margin-top: 10px; }

.dest-region { padding-block: 90px; }
.dest-region:nth-of-type(odd) { background: var(--color-sand); }

.dest-region__title {
  margin-bottom: 22px;
  font-size: var(--h3-size);
  line-height: var(--h3-line);
  text-transform: none;
  color: var(--color-ink);
}

.dest-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px 15px;
}

.dest-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 355 / 477;
  padding: var(--space-20);
  overflow: hidden;
  background: var(--color-charcoal);
  color: var(--color-white);
  text-decoration: none;
}
/* Figma: black scrim from 60% of the height (transparent) to the bottom (opaque) */
.dest-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 60.5%, var(--color-black));
}
.dest-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dest-card__name {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: var(--h3-size);
  line-height: var(--h3-line);
  text-transform: uppercase;
}
.dest-card:focus-visible { outline: 3px solid var(--color-coral); outline-offset: 3px; }

@media (max-width: 991.98px) {
  .dest-hero { padding-top: var(--space-60); }
  .dest-region { padding-block: var(--space-60); }
  .dest-grid { grid-template-columns: repeat(3, 1fr); }
  .dest-card__name { font-size: 28px; }
}

@media (max-width: 575.98px) {
  .dest-region { padding-block: 40px; }
  .dest-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .dest-card { padding: var(--space-10); }
  .dest-card__name { font-size: 20px; }
}