@charset "UTF-8";
.snap-gallery,
.snap-slideshow {
  display: grid;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-bottom: 15px;
  grid-template-columns: repeat(var(--columns, 1), 1fr);
  gap: var(--gap);
  user-select: none;
  /* disable text selection */ }

.snap-slideshow .snap-prev span,
.snap-slideshow .snap-next span {
  color: transparent !important;
  text-shadow: unset; }

.snap-slideshow:hover .snap-prev span,
.snap-slideshow:hover .snap-next span {
  color: white !important;
  text-shadow: #000 0 0 10px;
  transition: 0.3s; }

.snap-slideshow:hover .snap-image img {
  transform: scale(1.01);
  transition: 0.3s; }

.snap-image {
  cursor: var(--cursor);
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: var(--aspectratio); }

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

.snap-image figcaption {
  display: block;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 1px 0px 1px 0px;
  color: #fff;
  text-align: center;
  background: rgba(0, 0, 0, 0.5); }

/* ────────────────────────────────
   Animation
   ────────────────────────────────*/
.snap-slideshow .snap-image,
.snap-lightbox .snap-lightbox-inner {
  animation: 1s fade; }

@keyframes fade {
  from {
    opacity: .4; }
  to {
    opacity: 1; } }

/* ────────────────────────────────
   Lightbox
   ────────────────────────────────*/
.snap-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  height: 100dvh;
  z-index: 999;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.8);
  user-select: none;
  /* disable text selection */ }

/* ── inner container ─────────────────*/
.snap-lightbox-inner {
  /* centre the whole figure (image + numbertext) and its caption */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 90%;
  max-height: 80%;
  text-align: center; }

/* ── wrapper that holds image + counter ───────────*/
.snap-media {
  position: relative;
  /* lets numbertext sit on top-left of the image */
  display: inline-block;
  max-height: 80dvh; }

.snap-media img {
  max-height: 80dvh;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block; }

/* counter */
.snap-media .snap-numbertext {
  position: absolute;
  top: 0;
  left: 0;
  background: #000;
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px; }

/* ── caption ───────────────────────────*/
.snap-caption {
  margin-top: 8px;
  bottom: 0;
  left: 0;
  width: 100%;
  color: #f2f2f2;
  text-shadow: 1px 1px 10px #000;
  font-size: 1.1em;
  text-align: center;
  /* slideshow view */
  /* lightbox view — always below the picture */ }
  .snap-slideshow .snap-caption {
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    padding: 2px 10px; }
  .snap-lightbox .snap-caption {
    position: relative;
    left: auto;
    width: auto;
    margin: 8px 0 0;
    background: none;
    padding: 0;
    font-weight: 700;
    text-align: center; }

/* ── prev / next and close buttons ─────────────────*/
.snap-prev,
.snap-next {
  color: transparent !important;
  position: absolute;
  z-index: 800;
  height: 100%;
  width: 5%;
  cursor: pointer; }
  .snap-prev span,
  .snap-next span {
    color: white !important;
    text-shadow: #000 0 0 10px;
    font-size: 30px; }
  .snap-prev:hover, .snap-prev:focus,
  .snap-next:hover,
  .snap-next:focus {
    cursor: pointer; }
    .snap-prev:hover span, .snap-prev:focus span,
    .snap-next:hover span,
    .snap-next:focus span {
      transform: scale(1.4);
      transition: 0.3s; }
  .snap-slideshow .snap-prev, .snap-slideshow .snap-next {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 15%;
    width: 10%;
    min-height: 50px;
    min-width: 50px; }
  @media screen and (max-width: 767px) {
    .snap-lightbox .snap-prev, .snap-lightbox .snap-next {
      width: 10%; } }
  .snap-prev span,
  .snap-next span {
    caret-color: transparent;
    padding: 1%; }
    .snap-lightbox .snap-prev span, .snap-lightbox .snap-next span {
      position: fixed;
      top: 50%; }

.snap-prev {
  left: 0; }
  .snap-lightbox .snap-prev span {
    left: .5%; }

.snap-next {
  right: 0; }
  .snap-lightbox .snap-next span {
    right: .5%; }

.snap-download {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 15px;
  left: 15px;
  height: 50px;
  width: 50px;
  color: white !important;
  text-shadow: #000 0 0 10px;
  font-size: 40px;
  font-weight: bold;
  z-index: 900; }
  .snap-download:hover, .snap-download:focus {
    cursor: pointer;
    transform: scale(1.4);
    transition: 0.3s; }

.snap-close {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 15px;
  right: 15px;
  height: 50px;
  width: 50px;
  color: white !important;
  text-shadow: #000 0 0 10px;
  font-size: 50px;
  font-weight: bold;
  z-index: 900; }
  .snap-close:hover, .snap-close:focus {
    cursor: pointer;
    transform: scale(1.4);
    transition: 0.3s; }