.carousel-item {
    overflow: hidden;
    height: 60vh;
}

/* Responsive adjustments for the hero video used in place of the
   carousel on smaller screens. These values mirror the existing
   breakpoints applied to `.carousel-item` so the layout remains
   consistent. */
#hero-video,
#hero-animation {
    overflow: hidden;
    height: 60vh;
}

@media (max-width: 575px) {
    .carousel-item {
        height: 120px;
    }

    #hero-video,
    #hero-animation {
        height: 120px;
    }

    .carousel-item img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}

@media (min-width: 576px) and (max-width: 991px) {
    .carousel-item {
        height: 250px;
    }

    #hero-video,
    #hero-animation {
        height: 250px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .carousel-item {
        height: 300px;
    }

    #hero-video,
    #hero-animation {
        height: 300px;
    }
}

@media (min-width: 1200px) and (max-width: 1920px) {
    .carousel-item {
        height: 600px;
    }

    #hero-video,
    #hero-animation {
        height: 600px;
    }
}