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

/* Declare heights because of positioning of img element */
header.carousel .item {
  height: 500px;
  
}
header.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: min-content;
}


@media (max-width: 760px) {
 /* Carousel base class */
header.carousel {
  height: 300px;
}
header.carousel .item {
  height: 300px;
}
header.carousel-inner > .item > img {
  min-width: 100%;
  height: min-content;
}  

/* Declare heights because of positioning of img element */
header.carousel .item {
  height: 200px;
} 
}

@media (min-width: 761px) and (max-width: 1060px) {
 /* Carousel base class */
header.carousel {
  height: 300px;
}
header.carousel .item {
  height: 300px;
}
header.carousel-inner > .item > img {
  min-width: 100%;
  height: min-content;
}  

header.carousel {
  height: 600px;
}

/* Declare heights because of positioning of img element */
header.carousel .item {
  height: 600px;
} 
}