/* Good to Know: preserve the full 16:9 hero photograph rather than cropping it */
.page-hero.good-to-know-hero {
  min-height: 0;
  align-items: center;
}
.page-hero.good-to-know-hero .hero-photo {
  min-height: 0;
}
.page-hero.good-to-know-hero .hero-photo img {
  width: 100%;
  height: auto;
  min-height: 0;
  object-fit: contain;
  object-position: center;
}

/* Good to Know hero: align the opening with the same page grid used below */
@media (min-width: 900px) {
  .page-hero.good-to-know-hero {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 32px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 36px;
  }
  .page-hero.good-to-know-hero .hero-text {
    padding: 48px 0;
  }
  .page-hero.good-to-know-hero .hero-photo {
    width: 100%;
  }
}

/* Tighten the transition from the hero into the topic overview */
.page-hero.good-to-know-hero + .section {
  padding-top: 16px;
}

@media (max-width: 899px) {
  .page-hero.good-to-know-hero + .section {
    padding-top: 24px;
  }
}

/* Good to Know: keep supporting photography visually subordinate to the information */
/* Keep the hero explanatory subheading in regular type rather than italics */
.page-hero .hero-sub {
  font-style: normal;
}

/* Good to Know: card treatment for practical information in alternating sections */
#before-detail .info-panel,
#hotels-detail .info-panel {
  background: rgba(255, 255, 255, 0.48);
  border-radius: 10px;
  padding: 28px 30px;
  height: 100%;
}
#before-detail .info-panel h3,
#hotels-detail .info-panel h3 {
  margin-top: 0;
}

.topic-card .topic-img {
  aspect-ratio: 16 / 7;
  max-height: 210px;
  overflow: hidden;
  border-radius: 6px;
  margin-bottom: 18px;
}
.topic-card .topic-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.topic-card h4 {
  margin-top: 0;
}
.gtk-help-photo {
  align-self: center;
}
.gtk-help-photo img {
  width: 100%;
  max-height: 330px;
  object-fit: cover;
  display: block;
  border-radius: 6px;
}
@media (max-width: 760px) {
  .feature-grid[style*="repeat(2,1fr)"],
  .feature-grid[style*="repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  .topic-card .topic-img {
    aspect-ratio: 16 / 8;
    max-height: 190px;
  }
  .gtk-help-photo img {
    max-height: 240px;
  }
}

/* Current-page state for the mobile navigation */
.mobile-nav a.active {
  color: var(--color-accent-dark);
  border-bottom-color: var(--color-accent-dark);
}