/* Mobile gallery content, with the established full-width desktop scenes. */
#attractions-gallery .attraction-caption {
  bottom: clamp(38px, 6svh, 64px);
}

#attractions-gallery .attraction-description {
  margin-top: 16px;
}

#attractions-gallery .attraction-open {
  width: 40px;
  height: 40px;
  margin-left: 14px;
  border-color: #fff;
  background: #fff;
  color: #173e35;
  box-shadow: none;
}

#attractions-gallery .attraction-open svg {
  width: 21px;
  height: 21px;
}

#attractions-gallery .attraction-open:is(:hover, :focus-visible) {
  background: #173e35;
  color: #fff;
  border-color: #173e35;
}

#attraction-global-village .attraction-shade {
  background: linear-gradient(180deg, rgba(5,20,29,.08) 12%, rgba(5,20,29,.26) 32%, rgba(5,20,29,.84) 60%, rgba(5,20,29,.92) 100%);
}

#attraction-global-village .attraction-caption {
  color: #fff;
  text-shadow: 0 2px 12px #06141dcc;
}

#attraction-global-village .attraction-description {
  color: #fff;
}

@media (max-width: 760px) {
  #attractions-gallery .attraction-open {
    width: 30px;
    height: 30px;
    margin-left: 9px;
  }
  #attractions-gallery .attraction-open svg {
    width: 17px;
    height: 17px;
  }
}

/* Keep each desktop caption in view while the next scene scrolls upward. */
@media (min-width: 761px) {
  #attractions-gallery .attraction-caption {
    top: clamp(32px, 5svh, 56px);
    bottom: auto;
  }
  #attractions-gallery .attraction-caption,
  #attractions-gallery .attraction-caption h3,
  #attractions-gallery .attraction-description {
    text-shadow: none;
  }
  #attractions-gallery .attraction-shade {
    background: linear-gradient(180deg, rgba(7,31,40,.74), rgba(7,31,40,.5) 24%, rgba(7,31,40,.12) 50%, transparent 72%);
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .attractions { --gallery-header: 112px; }
}