.letter-viewer {
  width: 100%;
}

.letter-viewer__toggle {
  display: flex;
  justify-content: center;
  gap: var(--sm);
  margin-bottom: var(--sm);
}
@media screen and (width < 640px) {
  .letter-viewer__toggle {
    flex-direction: column;
    align-items: center;
    gap: var(--xs);
  }
  .letter-viewer__toggle .button {
    width: 100%;
  }
}

.letter-viewer__body {
  display: grid;
}

.letter-viewer__text,
.letter-viewer__images {
  grid-area: 1/1;
  transition: opacity 0.45s ease, filter 0.45s ease, transform 0.45s ease;
  overflow-y: auto;
  height: min-content;
  width: fit-content;
  margin: 0 auto var(--md) auto;
}

.letter-viewer__images {
  opacity: 0;
  pointer-events: none;
  filter: blur(10px);
  transform: scale(1.03);
  border: 2px solid var(--Primary-Light-Stroke);
  border-radius: 15px;
  padding: var(--md);
  background: var(--Primary-Light-Stroke-Gradient);
  width: 100%;
}

.letter-viewer--show-images .letter-viewer__text {
  opacity: 0;
  pointer-events: none;
  filter: blur(10px);
  transform: scale(0.97);
}
.letter-viewer--show-images .letter-viewer__images {
  opacity: 1;
  pointer-events: auto;
  filter: blur(0);
  transform: scale(1);
}

.letter-viewer__track {
  height: 70vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  gap: var(--md);
}
.letter-viewer__track::-webkit-scrollbar {
  display: none;
}

.letter-viewer__slide {
  scroll-snap-align: start;
  height: 100%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.letter-viewer__slide img {
  max-height: 100%;
  width: 100%;
  object-fit: contain;
  display: block;
  height: 70vh;
}

body.has-image-lightbox-open .letter-viewer__slide img {
  height: 90vh;
}

@media screen and (width >= 640px) {
  body.has-image-lightbox-open .letter-viewer__slide img {
    width: auto;
  }
}
.letter-viewer__pager {
  display: flex;
  justify-content: center;
  gap: var(--xs);
  margin-top: var(--sm);
}

.letter-viewer__dot.is-active {
  background-color: var(--Primary-Light-Contrast);
  color: var(--Texts-light);
}