.viewport-content {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: calc(100vh - (2 * var(--space)));
  min-height: calc(100svh - (2 * var(--space)));
  height: calc(100vh - (2 * var(--space)));
  height: calc(100svh - (2 * var(--space)));
  overflow: hidden;
  gap: var(--space);
}

main {
  min-height: 0;
  position: relative;
}

.splide,
.splide__track,
.splide__list {
  height: 100% !important;
}

.splide__slide {
  height: 100% !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.splide__slide img {
  height: 100%;
  width: auto;
  /* lets the image keep aspect ratio */
  max-width: 80%;
  /* prevents overflow on wide images */
  object-fit: contain;
  /* or "cover" if you want to fill+crop */
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 1000;
  pointer-events: none;
  background: white;

}

.overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: initial;
}

.overlay-content {
  font-size: var(--head);
  text-align: center;
  max-width: 48ch;
}

.overlay-content p:not(:last-of-type) {
  margin-bottom: var(--space);
}

.splide__slide--info {
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-content {
  font-size: var(--head);
  text-align: center;
  max-width: min(48ch, 80%);
  max-height: 100%;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.info-content ::-webkit-scrollbar {
  display: none;
}