:root {
  --gm-edge: 64px;
  --gm-gap: 80px;
}

@media (max-width: 767px) {
  :root {
    --gm-edge: 32px;
    --gm-gap: 80px;
  }
}
.gallery-modal {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
}
.gallery-modal::backdrop {
  background: #fff;
}

.gallery-modal__content {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.gallery-modal__strip {
  display: none;
}

@media (max-width: 767px) {
  .gallery-modal__content {
    display: none;
  }
  .gallery-modal__strip {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    height: 100vh;
    width: 100vw;
    align-items: center;
  }
  .gallery-modal__strip::-webkit-scrollbar {
    display: none;
  }
  .gallery-modal__slide {
    scroll-snap-align: center;
    flex-shrink: 0;
    width: 88vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
  }
  .gallery-modal__slide .gallery-modal__image {
    max-width: 100%;
    max-height: calc(100vh - 120px);
  }
  .gallery-modal__slide .gallery-modal__caption {
    margin-top: 12px;
    font-size: 0.875rem;
    text-align: center;
    color: #333;
  }
}
.gallery-modal__image {
  display: block;
  max-width: min(2000px, 100vw - var(--gm-gap) * 2);
  max-height: min(1440px, 100vh - 160px);
  width: auto;
  height: auto;
  object-fit: contain;
}

.gallery-modal__caption {
  margin-top: 12px;
  font-size: 0.875rem;
  text-align: center;
  color: #333;
}

.gallery-modal__prev,
.gallery-modal__next,
.gallery-modal__close {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
}
.gallery-modal__prev svg,
.gallery-modal__next svg,
.gallery-modal__close svg {
  display: block;
  width: 56px;
  height: 56px;
}
.gallery-modal__prev:hover .gm-btn__bg,
.gallery-modal__next:hover .gm-btn__bg,
.gallery-modal__close:hover .gm-btn__bg {
  fill: #C0DDF7;
}
.gallery-modal__prev:focus-visible,
.gallery-modal__next:focus-visible,
.gallery-modal__close:focus-visible {
  outline: 2px solid #0367E1;
  outline-offset: 3px;
}
.gallery-modal__prev:focus-visible .gm-btn__bg,
.gallery-modal__next:focus-visible .gm-btn__bg,
.gallery-modal__close:focus-visible .gm-btn__bg {
  fill: #C0DDF7;
}
.gallery-modal__prev:disabled,
.gallery-modal__next:disabled,
.gallery-modal__close:disabled {
  cursor: not-allowed;
}
.gallery-modal__prev:disabled .gm-btn__icon,
.gallery-modal__next:disabled .gm-btn__icon,
.gallery-modal__close:disabled .gm-btn__icon {
  fill: #81BBF0;
  stroke: #81BBF0;
}

.gallery-modal__prev {
  left: var(--gm-edge);
  top: 50%;
  transform: translateY(-50%);
}

.gallery-modal__next {
  right: var(--gm-edge);
  top: 50%;
  transform: translateY(-50%);
}

.gallery-modal__close {
  top: var(--gm-edge);
  right: var(--gm-edge);
}

@media (max-width: 767px) {
  .gallery-modal__prev,
  .gallery-modal__next {
    display: none;
  }
}