.carousel {
    contain: content;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    width: 100%;
    min-width: 50%;
    height: 100%;
    padding: 1rem;

    background-color: var(--clr-gray-light);

    @media (width >= 80rem), print {
        width: 50%;
    }
}

.carousel-lang-select {
    display: flex;
    justify-content: end;
    margin-bottom: 0.5rem;

    & > select {
        padding: 0.25rem 0.5rem;
        border: 1px solid var(--clr-gray-dark);
        border-radius: 0.25rem;
        background-color: white;
    }
}

.carousel-image-container {
    display: flex;
    align-items: center;

    /* Previous and Next buttons */
    & > button {
        display: inline-flex;
        align-items: center;

        padding: 0 0.5rem 0.5rem;
        border-radius: 0.75rem;

        font-size: x-large;
        color: white;
        vertical-align: middle;

        background-color: var(--clr-gray-dark);
    }

    & > div[data-carousel-container] {
        display: grid;
        width: 100%;

        & > div[data-carousel-slide] {
            pointer-events: none;

            grid-column: 1 / 2;
            grid-row: 1 / 2;

            opacity: 0;

            transition: opacity 300ms;

            &.slide-visible {
                pointer-events: auto;
                opacity: 100;
            }

            & > a {
                display: block;

                & img {
                    cursor: pointer;

                    width: 350px;
                    height: 350px;
                    margin-right: auto;
                    margin-left: auto;
                    border-radius: 0.125rem;

                    object-fit: contain;
                }
            }
        }
    }
}

.carousel-dots {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.carousel-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;

    background-color: white;

    transition: background-color 5000ms linear;

    &.current-dot {
        background-color: hsl(0deg 0% 0% / 50%);
    }
}