*[class^="carouselH"] {
    text-align: center;
}

.carousel {
    background-color: #fff;
    border-style: solid;
    border-width: 0.125rem;
    margin: 2rem auto;
    padding: 1rem 1rem 1rem 1rem;
    width: fit-content;
    max-width: 100%;
    max-width: -moz-available;
    /* WebKit-based browsers will ignore this. */
    max-width: -webkit-fill-available;
    /* Mozilla-based browsers will ignore this. */
    max-width: fill-available;
    min-width: 240px;
}

#carouselINFO {
    width: min-content;
    margin: auto;
    text-align: justify;
}

.carouselNav {
    text-align: center;
    font-size: 1.5rem;
}

.carouselHidden {
    display: none;
}

.carouselNav>span {
    padding: 0 1rem;
    cursor: pointer;
}

.carousel>article {
    padding: 0.5rem 1.75rem;
    text-align: center;
}
.carouselURL {
    cursor: pointer;
}
.carouselURL>img {
    height: auto;
    width: 100%;
    width: -moz-available;
    /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;
    /* Mozilla-based browsers will ignore this. */
    width: fill-available;
}

@media only screen and (max-width: 480px) {
    .carousel {
        width: 100%;
        margin: 1rem;
    }
    #carouselINFO {
        width: auto;
    }
}