.carousel {
    height: 50%;
}
.item, .carousel-inner {
    height: 100%;
}
/* Background images are set within the HTML using inline CSS, not here */
.fill {
    width: 100%;
    height: 100%;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

@media screen and (max-width: 414px) {
    .carousel {
        height: 100%;
    }
    .item,.carousel-inner {
        height: 100%;
    }
}

@media screen and (min-width: 990px) {
    .carousel {
        height: 47.2%;
    }
    .item,.carousel-inner {
        height: 100%;
    }
}

@media screen and (min-width: 1200px) {
    .carousel {
        height: 65%;
    }
    .item,.carousel-inner {
        height: 100%;
    }
}