.zoomable__overlay {
  position: fixed;
  top: -10%;
  right: -10%;
  bottom: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background-color: black;
  /* animation */
  transition: opacity 0.2s, visibility 0s 0.2s;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.zoomable__overlay.active {
  transition: opacity 0.2s;
  visibility: visible;
  opacity: 0.9;
  pointer-events: auto;
  /* help with hardware acceleration */
  will-change: opacity;
  contain: strict;
}

.zoomable__backdrop {
  position: absolute;
  left: 50%;
  top: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
}

.zoomable {
  position: relative;
  display: block;
}
.zoomable > img {
  width: 100%;
  height: auto;
}
.zoomable.active {
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.4);
  background-color: #fff;
}
.zoomable.active .gallery__image-credits {
  bottom: -23px;
}
.zoomable, .zoomable:focus {
  outline: none;
}

.zoomable--video:not(.active)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -24px -20px;
  opacity: 0.8;
}
.zoomable--video:not(.active):hover::after {
  opacity: 0.9;
}

.zoomable__content img, .zoomable__content iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 0;
}