#myCarousel {
    flex-shrink: 1;
    width: 100%;
    aspect-ratio: 10 / 9;
    min-height: 10vh;
    max-height: 100%;
}
@media (min-aspect-ratio:3) {
    #myCarousel {
        min-height: 30vw;
    }
}
#myCarousel .carousel-inner {
    height: 100%;
}
/*indicators*/
#myCarousel .carousel-control-prev .carousel-control-prev-icon, #myCarousel .carousel-control-next .carousel-control-next-icon{
    /*background-color: rgba(0, 0, 0, 0.2);*/
    width: 35px;
    height: 35px;
    border-radius: 10px;
}
#myCarousel .carousel-indicators button{
    background-color: rgba(190, 190, 190, 0.5);
}
#myCarousel .carousel-indicators .active{
    background-color: rgba(190, 190, 190, 1);
}
 
#myCarousel .carousel-caption {
    z-index: 10;
    color: white;
    padding-right: 20px;
    padding-left: 20px;
    /* vertically center the caption */
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
}
#myCarousel .carousel-item .caption-with-background { 
    background-color: rgba(0, 0, 0, 0.2);   
    border-radius: 15px;
}
#myCarousel .carousel-caption h1 {
    font-size: 1.65rem;
}
#myCarousel .carousel-caption h2 {
    font-size: 1.1rem;
}

/* Declare heights because of positioning of img element */
#myCarousel .carousel-item {
    min-width: 100%;
    min-height: 40vh;
    height: 100%;
    /*background-size:cover;*/
}

#myCarousel .carousel-item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    width: 100%;
    height: auto;
    /* animations */
    transform: translateY(clamp(-20%, -20%*var(--scroll-carousel), 20%));
}

#myCarousel .carousel-caption .btn {
    display: none;
}
@media (min-width:576px) {
    #myCarousel .carousel-caption .btn {
        display: inline-block;
    }
    #myCarousel .carousel-caption h1 {
        font-size: 2.1rem;
    }
    #myCarousel .carousel-caption h2 {
        font-size: 1.4rem;
    }
}
@media (min-width:768px) {
    #myCarousel .carousel-caption h1 {
        font-size: 2.55rem;
    }
    #myCarousel .carousel-caption h2 {
        font-size: 1.7rem;
    }
}

@media (min-width: 40em) {
    /* Bump up size of carousel content */
    #myCarousel .carousel-caption p {
        margin-bottom: 1.25rem;
        font-size: 1.25rem;
        line-height: 1.3;
    }
}