body:has(.thumbnail-container.open) #overlay {
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.7);
}
body:has(.thumbnail-container.open) #controls {
  display: grid;
}
body #overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -10;
  background-color: transparent;
}
body .pagination {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 20px;
}
body .pagination a {
  color: black;
}
body .pagination .disabled {
  color: grey;
}

#controls {
  position: fixed;
  z-index: 100;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  height: max(4rem, 30vh);
  grid-template-columns: 1fr max(6rem, 20vw) 1fr;
  box-sizing: border-box;
}
#controls button {
  justify-content: center;
  cursor: pointer;
  background: none;
  border: none;
  outline: none;
  display: grid;
  align-items: end;
  font: inherit;
  margin-bottom: -3rem;
  padding-bottom: 3rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.1) 0, transparent 3rem);
  transition: margin-bottom ease-in 0.2s, padding-bottom ease-in 0.2s;
}
#controls button svg {
  height: 4rem;
  stroke: white;
}
#controls button:hover {
  margin-bottom: 0;
  padding-bottom: 0;
}
#controls button:first-child {
  justify-content: end;
  padding-right: 1rem;
}
#controls button:last-child {
  justify-content: start;
  padding-left: 1rem;
}

#gallery {
  --border-radius: 0;
  --hover-border-radius: var(--border-radius);
  --filter: none;
  --hover-filter: none;
  --img-bg-color: transparent;
  --hover-img-bg-color: var(--img-bg-color);
  --container-background: transparent;
  --hover-container-background: var(--container-background);
  --img-opacity: 1;
  --hover-img-opacity: var(--img-opacity);
}
#gallery .gallery-grid {
  justify-content: center;
  display: grid;
  grid-template-columns: repeat(auto-fit, 120px);
  gap: 1rem;
}
@media (max-width: 500px) {
  #gallery .gallery-grid {
    gap: 0.5rem;
    justify-content: space-between;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    padding: 1rem;
  }
}
#gallery .gallery-grid .thumbnail-container {
  overflow: hidden;
  border-radius: var(--border-radius);
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  background: var(--container-background);
  transition: border-radius ease-in 0.2s;
}
#gallery .gallery-grid .thumbnail-container .thumbnail {
  cursor: pointer;
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  object-fit: cover;
  box-sizing: border-box;
  filter: var(--filter);
  opacity: var(--img-opacity);
  mix-blend-mode: multiply;
  background: var(--img-bg-color);
}
#gallery .gallery-grid .thumbnail-container:hover, #gallery .gallery-grid .thumbnail-container.open {
  border-radius: var(--hover-border-radius);
  background: var(--hover-container-background);
}
#gallery .gallery-grid .thumbnail-container:hover img, #gallery .gallery-grid .thumbnail-container:hover figcaption, #gallery .gallery-grid .thumbnail-container.open img, #gallery .gallery-grid .thumbnail-container.open figcaption {
  background: var(--hover-img-bg-color);
  filter: var(--hover-filter);
  opacity: 1;
  mix-blend-mode: normal;
}
#gallery .gallery-grid .thumbnail-container:not(.open) .full-img, #gallery .gallery-grid .thumbnail-container:not(.open) .caption-button-container, #gallery .gallery-grid .thumbnail-container:not(.open) figcaption {
  display: none;
}
#gallery .gallery-grid .thumbnail-container .full-img, #gallery .gallery-grid .thumbnail-container figcaption {
  position: fixed;
  max-height: calc(100% - 7rem - 2vw);
  max-width: calc(100% - 4vw);
  margin: auto;
  top: 2vw;
  bottom: 4rem;
  left: 2vw;
  right: 2vw;
  z-index: 20;
}
#gallery .gallery-grid .thumbnail-container figcaption {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 50%;
  min-width: 300px;
  z-index: 100000;
  bottom: 1rem;
}
#gallery .gallery-grid .thumbnail-container figcaption > span {
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 0.5rem;
  max-height: 50%;
  overflow: scroll;
}
#gallery.hide-captions #gallery .gallery-grid .thumbnail-container figcaption {
  display: none;
}
#gallery .gallery-grid .thumbnail-container .caption-button-container {
  position: fixed;
  margin: auto;
  top: 1rem;
  left: 2vw;
  right: 2vw;
  z-index: 1000000;
}
#gallery .gallery-grid .thumbnail-container .caption-button-container > button {
  margin: auto;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 0.5rem;
  border: none;
}
#gallery:not(.hide-captions) .open .show-captions-button {
  display: none;
}
#gallery:not(.hide-captions) .open .hide-captions-button {
  display: block;
}
#gallery.hide-captions .open .show-captions-button {
  display: block !important;
}
#gallery.hide-captions .open .hide-captions-button {
  display: none !important;
}
#gallery.hide-captions .open figcaption {
  display: none !important;
}
#gallery .caption-button-container {
  display: none;
}
#gallery:has(figcaption:not(.empty)) .open .caption-button-container {
  display: block !important;
}
#gallery:has(figcaption:not(.empty)) .full-img {
  top: calc(2vw + 3rem);
  max-height: calc(100% - 9rem - 2vw) !important;
}

/*# sourceMappingURL=gallery.css.map */