.mySlides {
    display: none
}

.w3-left, .w3-right, .w3-badge {
    cursor: pointer
}

.w3-badge {
    height: 1rem;
    width: 1rem;
    padding: 0
}

.carousel {
    width: 90%;
    max-width: 29em;
    aspect-ratio: 1.5;
}

#one > .inner > .carousel,
#three > .inner > .carousel {
    margin: 0 0 0 2em;
}

#two > .inner > .carousel {
    margin: 0 2em 0 0;
}

.carousel img {
    display: none;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    object-fit: cover;
}

.carousel .controls {
    margin: 10px 0 !important;
    padding: 0 6px !important;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.carousel .controls .dots {
    flex-grow: 2;
}

.carousel .controls .dots > span:hover {
    background-color: #2e314170 !important;
}

.dot-selected {
    background-color: #2e3141a0 !important;
}

.carousel .controls .arrow {
    align-self: center;
    color: #999999 !important;
}

.carousel .controls .arrow:hover {
    color: #cccccc !important;
}

@media screen and (max-width: 736px) {
    .carousel {
        margin: auto !important;
    }
}