@charset "UTF-8";
/*
 * Bureau B (hn_bureaub) — Zoomable partial
 * Ported from Resources/Private/Partials/Zoomable.scss,
 * which only imports hn_templates Partials/Zoomable.scss (inlined below).
 */
/* $oversize: 10% */
.zoomable__overlay {
  position: fixed;
  top: -10%;
  right: -10%;
  bottom: -10%;
  left: -10%;
  width: 120%; /* 100% + 10% * 2 */
  height: 120%; /* 100% + 10% * 2 */
  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: var(--brand-white); /* $body-bg (no token) -> #fff */
}
.zoomable.active .gallery__image-credits {
  bottom: -23px;
}
.zoomable, .zoomable:focus {
  /* stylelint-disable-next-line */
  outline: none;
}

.zoomable--video:not(.active)::after {
  /* $width: 40px; $height: 48px */
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -24px -20px; /* $height/-2 $width/-2 */
  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;
}