.unicef-gallery {
  --thumbs-gap: 5px;
  --thumbs-col: 7;
  --img-ratio: auto 4/2;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media screen and (max-width: 991px) {
  .unicef-gallery {
    --thumbs-col: 3;
  }
}
.unicef-gallery .highlight-wrapper {
  position: relative;
}
.unicef-gallery .highlight-wrapper .highlight {
  position: relative;
  display: flex;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: var(--img-ratio);
}
.unicef-gallery .highlight-wrapper .highlight img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}
.unicef-gallery .highlight-wrapper .highlight-caption {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: var(--cl-white);
  font-weight: var(--font-semibold);
  font-style: italic;
  text-shadow: 0px 0px 2px var(--cl-black), 0px 0px 2px var(--cl-black);
}
.unicef-gallery .thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--thumbs-gap);
  margin-top: var(--thumbs-gap);
  margin-right: calc(var(--thumbs-gap) * -1);
}
.unicef-gallery .thumbs .thumb {
  flex: 0 1 calc(100% / var(--thumbs-col) - var(--thumbs-gap));
  position: relative;
  display: flex;
  background-color: var(--cl-black);
  justify-content: center;
  overflow: hidden;
  aspect-ratio: var(--img-ratio);
  cursor: pointer;
}
.unicef-gallery .thumbs .thumb:hover {
  /*  */
}
.unicef-gallery .thumbs .thumb:hover img {
  opacity: 0.8;
}
.unicef-gallery .thumbs .thumb img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
  transition: all 250ms ease-in-out;
}
.unicef-gallery .thumbs .thumb.active {
  cursor: default;
  background-color: var(--cl-black);
}
.unicef-gallery .thumbs .thumb.active img {
  opacity: 0.5;
}

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