.gl-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100dvw;
  height: 100dvh;
  overflow: hidden;
  z-index: 9999;
}

.gl-open {
  touch-action: none;
  overflow-y: hidden;
}

.gl-overlay {
  display: block;
  background: var(--gl-overlay, #111010f7);
  position: fixed;
  width: 100dvw;
  height: 100dvh;
  overflow: hidden;
  z-index: -1;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  will-change: opacity;
}

.gl-single-slide .gl-prev,
.gl-single-slide .gl-next {
  display: none;
}

.gl-load-error {
  background: var(--gl-error-bg, #fff);
  color: var(--gl-error-color, #000);
  padding: 2rem 4rem;
  min-width: 200px;
  text-align: center;
}

.gl-overlay-in {
  animation: gl-fade-in 0.3s ease forwards;
  opacity: 1;
}

.gl-inline-desc {
  display: none;
}

.gl-slider {
  height: 100dvh;
  overflow-x: scroll;
  overflow-y: hidden;
  display: flex;
  align-items: center;
  position: relative;
  white-space: nowrap;
}

.gl-slider:not(.doing-drag) {
  scroll-snap-type: x mandatory;
}

.gl-slider::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}

.gl-slide {
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: calc(100% * var(--gl-index, 0));
  scroll-snap-align: start;
  flex: 1 1 100%;
}

.gl-figure {
  margin: 0;
  padding: 0;
}

.gl-figure > img {
  display: block;
  height: auto;
  max-height: var(--gl-max-height, calc(100dvh - 3.125em));
  max-width: var(--gl--max-width, 100dvw);
  width: auto;
  user-select: none;
}

.gl-theme-base .gl-description {
  background: var(--gl--description-bg, #fff);
  padding: var(--gl--description-padding, 0.9rem);
  margin: 0;
}

.gl-description p {
  margin-bottom: 0;
  margin-top: 0;
}

.gl-description p + p {
  margin-top: 0.5em;
}

.gl-media {
  position: relative;
}

.gl-slide.visible.loaded .gl-animation-ended {
  animation: none !important;
}

.gl-slide-loader {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.gl-slide-loader svg {
  fill: var(--gl-loader-fill, #7d7d7d);
  color: var(--gl-loader-color, #00000082);
  width: var(--gl-loader-size, 38px);
  animation: gl-loader 1s linear infinite;
}

.gl-btn {
  appearance: none;
  cursor: pointer;
  font: inherit;
  margin: 0;
  opacity: var(--gl-button-opacity, .5);
  padding: 0;
  position: absolute;
  touch-action: manipulation;
  z-index: 99;
  width: var(--gl-button-width, 45px);
  height: var(--gl-button-height, 45px);
  border-radius: var(--gl-button-radius, 5px);
  border: var(--gl-button-border, 1px solid transparent);
  background-color: var(--gl-button-background, #000000b0);
  display: flex;
  justify-content: center;
  align-items: center;
  outline: none;
}

.gl-btn svg {
  width: var(--gl-button-svg-size, 19px);
  fill: var(--gl-button-color, #fff);
}

.gl-btn[disabled] {
  cursor: default;
  opacity: var(--gl-button-opacity-disabled, .2);
}

.gl-btn:not([disabled]):hover {
  opacity: 1;
}

.gl-btn:focus-visible {
  outline: var(--gl-button-border-focus, 2px solid #ffffff);
}

.gl-next,
.gl-prev {
  top: calc(100dvh / 2 - var(--gl-button-height, 45px) / 2);
}

.gl-prev {
  left: 1rem;
}

.gl-next {
  right: 1rem;
}

.gl-close {
  top: 1rem;
  right: 1rem;
}

.gl-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.gl-closing {
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
  transition-delay: 0.05s;
}

.gl-slide-effect-fade .gl-slide.visible.loaded .gl-media {
  animation: gl-fade-in 0.3s ease;
}

.gl-slide.visible.loaded .gl-media.gl-zoom-in {
  animation: gl-zoom-in 0.3s ease;
}

.gl-slide.visible.loaded .gl-media.gl-zoom-out {
  animation: gl-zoom-out 0.3s ease;
}

.gl-slide.visible.loaded .gl-media.gl-fade-in {
  animation: gl-fade-in 0.5s ease;
}

.gl-slide.visible.loaded .gl-media.gl-fade-out {
  animation: gl-fade-out 0.4s ease;
}

.gl-invisible {
  opacity: 0;
}

@keyframes gl-loader {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes gl-zoom-in {
  from {
    opacity: 0;
    transform: scale3d(0.8, 0.8, 0.8);
  }
  to {
    transform: scale3d(1, 1, 1);
    opacity: 1;
  }
}

@keyframes gl-zoom-out {
  from {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
  50% {
    opacity: 0;
    transform: scale3d(0.8, 0.8, 0.8);
  }
  to {
    opacity: 0;
  }
}

@keyframes gl-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes gl-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}