/* gallery slider */
.gallery {
  display: flex;
  position: relative;
  width: 100vw;
  --area: calc(100vw - calc(var(--offset, 0px) *2));
  --hrea: min(66vh, var(--area));
  margin-left: calc(var(--offset, 0px) * -1);
  margin-right: calc(var(--offset, 0px) * -1);
  height: var(--hrea);
  align-items: center;
  user-select: none;
  -webkit-user-select: none;
  opacity: 0;
  transition: opacity .4s ease;
}
.gallery.gallery-ready { opacity: 1; }
.gallery:not(.gallery-single) { cursor: grab; }
.gallery:not(.gallery-single):active { cursor: grabbing; }
.gallery.gallery-single { justify-content: center; }
.gallery-item {
  flex: 0 0 var(--area);
  height: var(--hrea);
  width: var(--area);
  max-height: var(--hrea);
  max-width: var(--area);
  flex-shrink: 0;
  -webkit-user-drag: none;
  will-change: transform;
  transition: opacity .4s ease;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}
.gallery-item.gallery-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}
.gallery-item img,
.gallery-item video {
  height: var(--hrea);
  width: var(--area);
  max-height: var(--hrea);
  max-width: var(--area);
  object-fit: contain;
  object-position:top left;
  transform-origin: center center;
  transition: transform .4s ease;
}

.gallery-dot,.gallery-arrow {
    display: inline-flex;
    width: 1.5em;
    height: 1.5em;
    align-items: center;
    justify-content: center;
    margin: 0 0.4rem 0 -0.4rem;
    cursor: pointer;
    position: relative;
}
.gallery-dot:before,.gallery-arrow:before {
    content: "";
    color: var(--fade);
    display: inline-block;
    transition: all 0.2s ease-out;
    width: 0.25em;
    height: 0.25em;
    border: solid 1px;
    position: absolute;
}
.gallery-dot.dot-active:before,.gallery-dot:hover:before {
    width: 0em;
    height: 0em;
    border-width: 4px;
}
.gallery-arrow:before {
    content: "→";
    border: none;
    width: auto;
    height: auto;
}
.gallery-arrow:hover:before {
    font-size:120%;
}
.gallery-arrow.arrow-prev:before {
    content: "←";
}
@media (max-width:768px){

  li.meta-item.meta-gallery {
      width: 100%;
      order: -1;
      text-align: center;
  }

  li.meta-item.meta-gallery .meta-key {
      display: none;
  }
}

/* lightbox */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--back, rgba(0,0,0,.9));
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
.gallery-lightbox.open {
  opacity: 1;
  pointer-events: auto;
}
.gallery-lb-media {
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  cursor: grab;
  will-change: transform;
  transform-origin: center center;
}
.gallery-lb-media:active { cursor: grabbing; }