/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  height: 600px;
  margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 600px;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 600px;
}


/* TEST */

.container {
  max-width: 760px;
  margin: auto;
  border: #fff solid 3px;
  background: #fff;
}

.main-img img,
.imgs img {
  width: 100%;
}

.imgs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 5px;
}

/* Fade in animation */
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.fade-in {
  opacity: 0;
  animation: fadeIn 0.5s ease-in 1 forwards;
}










  /* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* MOBILE */


/* 768 */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {

}

/* 320 */
@media only screen and (min-width : 320px) and (max-width : 736px) {
  

 .carousel {
  height: 250px;
  margin-bottom: 60px;
    }
  
     .carousel .item {
  height: 250px;
}

#tall .carousel-inner > .item > img { 
 left: 60px;
}

#wide .carousel-inner > .item > img { 
left: 0px;
}


}