.carousel-control-next, .carousel-control-prev {
    width: 10%;
}

.yd-carousel-img {
    width: fit-content;
    height: 35vw;
    max-width: 96%;
}

.yd-carousel-card {
    width: 100%;
}

/*
*
*   The following documentation link was used to setup card breakpoints
*   at the proper values, so they mirror other elements
*   https://getbootstrap.com/docs/4.6/layout/overview/#responsive-breakpoints
*
*/

/* SM */
@media (min-width: 576px){
    .yd-carousel-img {
        height: 20vw;
    }
    .yd-carousel-card {
        width: 66%;
    }
}

/* MD */
@media (min-width: 768px){
    .yd-carousel-img {
        height: 15vw;
    }
    .yd-carousel-card {
        width: 66%;
    }
}

@media (min-width: 992px){
    .yd-carousel-img {
        height: 10vw;
    }

    .yd-carousel-card {
        width: 30%;
    }
}