.gallery-lightbox {
  --pswp-bg: var(--background);
  --pswp-placeholder-bg: var(--site-header, #142630);
  --pswp-icon-color: var(--foreground);
  --pswp-icon-color-secondary: var(--site-hero, #101e2a);
  --pswp-icon-stroke-color: var(--site-hero, #101e2a);
  --pswp-error-text-color: var(--foreground);
  --pswp-root-z-index: 300;
  --gallery-accent: var(--site-focus, #bce8ff);
}

.gallery-lightbox .pswp__top-bar {
  align-items: center;
  height: 4.5rem;
  padding: max(.5rem, env(safe-area-inset-top)) max(.75rem, env(safe-area-inset-right)) 0 max(.75rem, env(safe-area-inset-left));
}

.gallery-lightbox .pswp__button {
  width: 3rem;
  height: 3rem;
  margin: .5rem;
  border-radius: 50%;
}

.gallery-lightbox .pswp__button::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in srgb, var(--site-secondary, #a9bdcb) 47.843137%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--site-hero, #101e2a) 74.901961%, transparent);
  transition: background-color 180ms ease, border-color 180ms ease;
}

.gallery-lightbox .pswp__button:is(:hover, :focus-visible, :active) {
  --pswp-icon-color: var(--site-hero, #101e2a);
  --pswp-icon-stroke-color: var(--gallery-accent);
}

.gallery-lightbox .pswp__button:is(:hover, :focus-visible, :active)::before {
  background: var(--gallery-accent);
  border-color: var(--gallery-accent);
}

.gallery-lightbox button:focus-visible {
  outline: 3px solid var(--gallery-accent);
  outline-offset: 2px;
}

.gallery-lightbox .pswp__button .pswp__icn {
  width: 1.75rem;
  height: 1.75rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.gallery-lightbox .pswp__button--zoom .pswp__icn {
  width: 2rem;
  height: 2rem;
}

.gallery-lightbox .pswp__button--arrow {
  width: 2.75rem;
  height: 2.75rem;
  margin-top: -1.375rem;
}

.gallery-lightbox .pswp__button--arrow::before {
  inset: .25rem;
}

.gallery-lightbox .pswp__button--arrow .pswp__icn {
  margin-top: 0;
}

.gallery-lightbox .pswp__button--arrow--prev {
  left: max(.75rem, env(safe-area-inset-left));
}

.gallery-lightbox .pswp__button--arrow--prev .pswp__icn {
  left: calc(50% + .25rem);
}

.gallery-lightbox .pswp__button--arrow--next {
  right: max(.75rem, env(safe-area-inset-right));
}

.gallery-lightbox .pswp__button--arrow--next .pswp__icn {
  left: calc(50% - .25rem);
  right: auto;
  transform: translate(-50%, -50%) scaleX(-1);
}

.gallery-lightbox .pswp__error-msg {
  padding: 1rem;
  line-height: 1.5;
  text-align: center;
}

.gallery-lightbox__thumbnails {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: center;
  gap: clamp(.4rem, 1vw, .75rem);
  padding: 1rem max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background: linear-gradient(to top, var(--site-background, #050b13) 22%, color-mix(in srgb, var(--site-background, #050b13) 85.882353%, transparent) 68%, transparent);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: color-mix(in srgb, var(--site-secondary, #a9bdcb) 60.0%, transparent) transparent;
  scrollbar-width: thin;
  touch-action: pan-x;
}

.gallery-lightbox__thumbnail {
  flex: 0 0 clamp(4.25rem, 7vw, 5.25rem);
  height: clamp(3.25rem, 5.25vw, 4rem);
  padding: .18rem;
  border: 2px solid transparent;
  border-radius: .2rem;
  background: color-mix(in srgb, var(--site-foreground, #eef5f8) 16.078431%, transparent);
  opacity: .62;
  cursor: pointer;
  overflow: hidden;
  transition: opacity 180ms ease, border-color 180ms ease;
}

.gallery-lightbox__thumbnail:hover {
  opacity: .9;
}

.gallery-lightbox__thumbnail[aria-current] {
  border-color: var(--gallery-accent);
  opacity: 1;
}

.gallery-lightbox__thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 35rem) {
  .gallery-lightbox .pswp__button--arrow,
  .gallery-lightbox .pswp__button--zoom {
    display: none;
  }
}

@media (max-height: 35rem) {
  .gallery-lightbox .pswp__top-bar {
    height: 3.25rem;
    padding-top: max(.25rem, env(safe-area-inset-top));
  }

  .gallery-lightbox .pswp__top-bar .pswp__button {
    width: 2.75rem;
    height: 2.75rem;
    margin-block: .25rem;
  }

  .gallery-lightbox .pswp__button--zoom {
    display: none;
  }

  .gallery-lightbox__thumbnails {
    padding-top: .45rem;
    padding-bottom: max(.45rem, env(safe-area-inset-bottom));
  }

  .gallery-lightbox__thumbnail {
    flex-basis: 3.6667rem;
    height: 2.75rem;
  }
}