/* Sea Quest: about page only (load after reset.css and styles.css) */

.panel {
  padding: calc(var(--space) * 2);
  border-radius: 0.5rem;
  background: var(--color-bg-alt);
  text-align: center;
}

.about-intro {
  display: grid;
  gap: var(--space);
}

.about-intro img {
  width: 100%;
  height: 18rem;
  object-fit: cover;
  border-radius: 0.5rem;
}

@media (min-width: 48rem) {
  .about-intro > * {
    grid-area: 1 / 1;
  }

  .about-intro img {
    height: 28rem;
  }

  .about-intro .panel {
    align-self: center;
    justify-self: start;
    width: min(24rem, 90%);
    margin-left: calc(var(--space) * 2);
  }
}

/* Image with a text card on top */
.overlay-feature {
  display: grid;
  gap: var(--space);
}

.overlay-feature img {
  width: 100%;
  height: 18rem;
  object-fit: cover;
  border-radius: 0.5rem;
}

@media (min-width: 48rem) {
  .overlay-feature > * { grid-area: 1 / 1; }
  .overlay-feature img { height: 28rem; }
  .overlay-feature .panel {
    align-self: center;
    justify-self: end;
    width: min(24rem, 90%);
    margin-right: calc(var(--space) * 2);
  }
}

/* Why choose us */
.why__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space);
  margin-top: calc(var(--space) * 2);
}

.why__card {
  padding: calc(var(--space) * 2);
  border-radius: 0.5rem;
  text-align: center;
}

/* Full-width image bands with a caption bar */
.band {
  margin-bottom: calc(var(--space) * 2);
}

.band img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: 0.5rem 0.5rem 0 0;
}

.band figcaption {
  padding: var(--space);
  background: var(--color-bg-alt);
  border-radius: 0 0 0.5rem 0.5rem;
  text-align: center;
}