/* ======================
Gallery
====================== */

.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px;
}

.gallery img{
  width:100%;
  display:block;
  cursor:pointer;
  transition:.3s;
}

.gallery img:hover{
  opacity:.8;
}

/* ======================
Lightbox
====================== */

#lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.92);
  display:flex;
  justify-content:center;
  align-items:center;
  opacity:0;
  visibility:hidden;
  transition:.3s;
  z-index:99999;
}

#lightbox.active{
  opacity:1;
  visibility:visible;
}

#lightbox-img{
  max-width:90vw;
  max-height:90vh;
  object-fit:contain;
  transform:scale(.9);
  transition:.3s;
}

#lightbox.active #lightbox-img{
  transform:scale(1);
}

.lightbox-close,
.lightbox-prev,
.lightbox-next{
  position:absolute;

  background:none;
  border:none;

  color:#fff;
  cursor:pointer;
  z-index:10;
}

.lightbox-close{
  top:20px;
  right:30px;
  font-size:50px;
}

.lightbox-prev{
  left:20px;
  top:50%;
  transform:translateY(-50%);
  font-size:60px;
}

.lightbox-next{
  right:20px;
  top:50%;
  transform:translateY(-50%);
  font-size:60px;
}

@media screen and (min-width: 768px) {

  .lightbox-prev,
  .lightbox-next{
    font-size:40px;
  }

  .lightbox-close{
    font-size:40px;
    right:15px;
  }
#lightbox-img{
  max-width:1100px;
  max-height:auto;
}

}