@charset "UTF-8";
.gallery {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1/1;
  height: auto;
  margin: 0 auto 3rem auto;
  position: relative;
  background-color: #FFFFFF;
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
}
@media (min-width: 400px) {
  .gallery {
    max-width: 600px;
    aspect-ratio: 4/3;
    height: auto;
  }
}
.gallery-open *:not(.gallery.lightbox-open) {
  z-index: 1 !important;
}

.gallery.no-js div::before {
  content: "© " attr(data-copyright);
}
.gallery.no-js div img:first-of-type:not(:target) {
  opacity: 1;
  z-index: 1;
}
.gallery.no-js nav:not(.thumbs), .gallery.no-js .prev, .gallery.no-js .next {
  visibility: hidden;
}
.gallery.no-js.gallery-slide > div {
  position: relative;
  white-space: nowrap;
  overflow-x: auto !important;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.gallery.no-js.gallery-slide > div::-webkit-scrollbar {
  display: none;
}
.gallery.no-js.gallery-slide > div::before {
  position: sticky !important;
  display: inline-block;
  right: 0;
  left: unset;
  z-index: 1;
}
.gallery.no-js.gallery-slide > div img {
  left: unset !important;
  opacity: 1 !important;
  position: relative !important;
  scroll-snap-align: center;
  display: inline-block !important;
  margin: 0;
  transition: none !important;
}
.gallery.no-js.gallery-slide > div img:target {
  opacity: 1;
  transition: none;
}
.gallery.copyright div::before {
  content: "© " attr(data-copyright);
}
.gallery-slide div img {
  transform: translateX(100%);
  transition: transform 0.4s ease !important;
}
.gallery-slide div img.reverse:not(.previous):not(.active) {
  transform: translateX(-100%);
  transition: none !important;
}
.gallery-slide div img.active {
  transform: translateX(0);
  transition: transform 0.4s ease !important;
}
.gallery-slide div img.previous {
  transition: transform 0.4s ease !important;
}
.gallery-slide div img.previous.reverse {
  transform: translateX(100%);
  transition: transform 0.4s ease !important;
}
.gallery.lightbox-open {
  position: fixed;
  overflow: hidden;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  pointer-events: none;
  touch-action: none;
  z-index: 99;
  max-width: 100%;
}
.gallery.lightbox-open > div {
  margin: 3.5rem auto;
}
.gallery.lightbox-open > div::before {
  content: "© " attr(data-copyright);
}
.gallery.lightbox-open > div img {
  object-fit: contain !important;
}
.gallery.lightbox-open nav, .gallery.lightbox-open var, .gallery.lightbox-open .thumbs, .gallery.lightbox-open .prev, .gallery.lightbox-open .next {
  opacity: 0;
  visibility: hidden;
}
.gallery.lightbox-open .close, .gallery.lightbox-open .lightbox {
  pointer-events: all;
}
.gallery > div {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.gallery > div::before {
  position: absolute;
  display: inline-block;
  right: 0.5em;
  top: 0.5em;
  padding: 0.25em 0.5em;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 3;
  font-size: 0.7rem;
  opacity: 0.5;
  transition: opacity 0.2s ease-in;
}
.gallery > div::before:hover {
  opacity: 1;
}
.gallery div img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  transition: opacity 0.2s ease-in;
}
.gallery div img.active, .gallery div img:target {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
  transition: opacity 0.2s ease-out;
}
.gallery div img.active + figcaption, .gallery div img:target + figcaption {
  opacity: 1;
}
.gallery div img.lightbox {
  object-fit: cover;
  background: inherit;
  pointer-events: all !important;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.gallery div img.lightbox.zoom {
  cursor: url("data:image/svg+xml,%3csvg viewBox='0 0 9 9' xmlns='http://www.w3.org/2000/svg' width='28' height='28' stroke='currentColor' stroke-width='0.8' stroke-linecap='square' fill='none'%3e%3ccircle cx='3.5' cy='3.5' r='2.5'/%3e%3cline x1='5.5' y1='5.5' x2='8' y2='8'/%3e%3cline x1='3.5' y1='2.5' x2='3.5' y2='4.5' stroke-width='0.6'/%3e%3cline x1='2.5' y1='3.5' x2='4.5' y2='3.5' stroke-width='0.6'/%3e%3c/svg%3e") 11 11, zoom-in !important;
  will-change: transform;
  transition: transform 0.3s ease;
}
.gallery div img.lightbox.zoom-out {
  cursor: url("data:image/svg+xml,%3csvg viewBox='0 0 9 9' xmlns='http://www.w3.org/2000/svg' width='28' height='28' stroke='currentColor' stroke-width='0.8' stroke-linecap='square' fill='none'%3e%3ccircle cx='3.5' cy='3.5' r='2.5'/%3e%3cline x1='5.5' y1='5.5' x2='8' y2='8'/%3e%3cline x1='2.5' y1='3.5' x2='4.5' y2='3.5' stroke-width='0.6'/%3e%3c/svg%3e") 11 11, zoom-out !important;
}
.gallery div img.lightbox + figcaption {
  position: fixed;
  bottom: 2rem;
  opacity: 1;
  transition: opacity 0.4s ease-in;
}
.gallery div img.lightbox ~ .close {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.gallery figcaption {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.5rem 0;
  pointer-events: none;
  background-color: rgba(255, 255, 255, 0.5);
  text-align: center;
  opacity: 0;
  z-index: 2;
  transition: opacity 0.2s ease-out;
}
.gallery var {
  font-style: normal;
}
.gallery var:empty::before {
  content: attr(data-content);
}
.gallery nav {
  position: absolute;
  bottom: -2em;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 0;
  height: 2rem;
  line-height: 2rem;
}
.gallery nav a {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin: 0 0.25rem;
  border-radius: 50%;
  background: lightgray;
  opacity: 0.5;
  text-indent: -9999px;
  overflow: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.gallery nav a:hover, .gallery nav a:focus {
  opacity: 1;
  transform: scale(1.2);
}
.gallery nav a.active {
  opacity: 1;
  background: gray;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.gallery .thumbs {
  margin: 0.75rem 0 0 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gallery .thumbs::-webkit-scrollbar {
  display: none;
}
.gallery .thumbs li {
  display: inline-block;
  margin: 0 0.45rem 0 0;
  vertical-align: top;
  overflow: visible;
}
.gallery .thumbs li:last-of-type {
  margin-right: 0;
}
.gallery .thumbs li a {
  display: inline-block;
  border-radius: 0.2rem;
  border-radius: 2px solid transparent;
  overflow: hidden;
  width: 6rem;
  height: 6rem;
  outline: none;
  transform: scale(0.9);
  transform-origin: 50% 50%;
  transition: transform 0.1s ease;
}
.gallery .thumbs li a:active, .gallery .thumbs li a:focus:not(:hover) {
  transform: scale(0.8);
}
.gallery .thumbs li a.active, .gallery .thumbs li a:focus {
  transform: scale(1);
  box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.3);
}
.gallery .thumbs li a img {
  display: block;
  width: 6rem;
  height: 6rem;
  object-fit: cover;
  border: none;
  opacity: 0.5;
  filter: grayscale(100%);
  transition: box-shadow 0.15s ease, filter 0.2s ease, opacity 0.2s ease;
}
.gallery .thumbs li a:hover img, .gallery .thumbs li a:focus img, .gallery .thumbs li a.active img {
  box-shadow: 0 0 0 2px gray;
  filter: none;
  opacity: 1;
}
.gallery .close, .gallery .prev, .gallery .next {
  text-decoration: none;
  color: inherit;
  text-indent: -200%;
  overflow: hidden;
  text-align: center;
  cursor: pointer;
  outline: none;
  transform-origin: 50% 50%;
  transform: scale(1);
}
.gallery .close .icon, .gallery .prev .icon, .gallery .next .icon {
  position: absolute;
  width: 2rem;
  height: 2rem;
  fill: currentColor;
}
.gallery .close:active, .gallery .close:hover:active, .gallery .prev:active, .gallery .prev:hover:active, .gallery .next:active, .gallery .next:hover:active {
  transform: scale(0.8);
  color: gold;
}
.gallery .close:hover, .gallery .prev:hover, .gallery .next:hover {
  color: goldenrod;
}
.gallery .close {
  position: fixed;
  width: 3rem;
  height: 3rem;
  top: 1rem;
  right: 1rem;
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.15s ease-in-out;
}
.gallery .close .icon {
  top: 0.5rem;
  left: 0.5rem;
}
.gallery .next, .gallery .prev {
  position: absolute;
  line-height: 3rem;
  width: 6em;
  left: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  z-index: 2;
  text-indent: -200%;
  opacity: 0;
  background-color: transparent;
  transform-origin: 25% 50%;
  transition: opacity 0.2s ease, transform 0.15s ease-in-out;
}
.gallery .next:hover, .gallery .next:focus, .gallery .prev:hover, .gallery .prev:focus {
  opacity: 1;
  transition: opacity 0.2s ease;
}
.gallery .next .icon, .gallery .prev .icon {
  left: 0.5rem;
  top: calc(50% - 1.5rem);
}
.gallery .next {
  left: auto;
  right: 0;
  text-indent: 200% !important;
  transform-origin: 75% 50%;
}
.gallery .next .icon {
  left: auto;
  right: 0.5rem !important;
}