/* CSS Document */
/* https://webdesign.tutsplus.com/responsive-bootstrap-lightbox-gallery--cms-38611t */

/* BASIC STYLES

–––––––––––––––––––––––––––––––––––––––––––––––––– */

:root {

  --lightbox: #242424;

}

7*
body {

  padding: 24px 0 48px;

}

/* IMAGE GRID STYLES

–––––––––––––––––––––––––––––––––––––––––––––––––– */

.image-grid figure {

  margin-bottom: 0;

}

.image-grid img {

  box-shadow: 0 .1rem .1rem rgba(0, 0, 0, 0.15);

  transition: box-shadow 0.2s;

}

.image-grid a:hover img {

  box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.35);

}

/* LIGHTBOX STYLES

–––––––––––––––––––––––––––––––––––––––––––––––––– */

.lightbox-modal .modal-content {

  background: var(--lightbox);

}

.lightbox-modal .btn-close {

  position: absolute;

  top: 20px;

  right: 18px;

  font-size: 1.2rem;

  z-index: 10;

}

.lightbox-modal .modal-body {

  display: flex;

  align-items: center;

  padding: 0;

  text-align: center;

}

.lightbox-modal img {

  width: auto;

  max-height: 100vh;

  max-width: 100%;

}

.lightbox-modal .carousel-caption {

  left: 0;

  right: 0;

  bottom: 0;

  background: rgba(36, 36, 36, 0.75);
  
  padding: 0.75rem 0;

}

.lightbox-modal .carousel-control-prev,

.lightbox-modal .carousel-control-next {

  top: 50%;

  bottom: auto;

  transform: translateY(-50%);

  width: auto;

}

.lightbox-modal .carousel-control-prev {

  left: 10px;

}

.lightbox-modal .carousel-control-next {

  right: 10px;

}