:root {
  --dark: #373349;
  --gap: 15px;
  --width: 240px;
  --width2: 400px;
  --height: var(--width);
}


main {
  margin: var(--gap);
}

.images > a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  overflow: hidden;
}

.images > a::after {
  content: "";
  background: linear-gradient(transparent,black);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transform: translateY(100%);
  transition-duration: .75s;
}

.images > a:hover::after {
  transform: translateY(50%);
}

.images > a > * {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition-duration: 1s;
}

.images > a:hover > img {
  transform: scale(1.05);
}

.images {
  display: grid;
  grid-gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(var(--width), 1fr));
  grid-auto-rows: var(--height);
  grid-auto-flow: dense;
}

.images .horizontal {
  grid-column: span 2;
}

.images .vertical {
  grid-row: span 2;
}

.images .big {
  grid-column: span 2;
  grid-row: span 2;
}

.lightbox {
    display: flex;
  flex-direction: column-reverse;
  /* top: 80% !important;
  transform: translateY(-50%); */
}
.lb-dataimages { position: relative;}
.lb-data {
    position: absolute;
  right: 0;
  top: -30px;
  left: 0;
}

.video {
  display: grid;
  grid-gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-auto-rows: var(--height);
  grid-auto-flow: dense;
}
.video a {

}
.video a iframe {
  width: 100%;
  aspect-ratio: 16/9;
}
@media (max-width: 900px) {
  .video {
    grid-template-columns: 1fr;
  }
}

.gallery-tabs { margin-block: 40px !important;}
.gallery-tabs .nav-link {
  border: 0;
  color: #999;
  
}
.gallery-tabs .nav-link.active {
  border-bottom: solid 4px var(--dark);
  color: #000;
}