.carousel-container {
    width: 100%;
    padding: 0;
    margin: 0 0 3em 0;

    ul {
        display: flex;
        overflow-x: scroll;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        margin: 0;
        anchor-name: --carousel;
        scroll-marker-group: after;
        max-width: 100%;
        flex: 0 0 760px;

        &::scroll-button(*) {
            border: 0;
            font-size: 2rem;
            background: none;
            color: black;
            opacity: 0.7;
            cursor: pointer;
        }

        &::scroll-button(*) {
            position: absolute;
            position-anchor: --carousel;
        }

        &::scroll-button(*):hover,
        &::scroll-button(*):focus {
            opacity: 1;
        }

        &::scroll-button(*):active {
            translate: 1px 1px;
        }

        &::scroll-button(*):disabled {
            opacity: 0.2;
            cursor: unset;
        }

        &::scroll-button(left) {
            content: "◄" / "Previous";
            right: calc(anchor(left) - 70px);
            /* bottom: calc(anchor(top) - 100px); */
        }

        &::scroll-button(right) {
            content: "►" / "Next";
            left: calc(anchor(right) - 70px);
            /* bottom: calc(anchor(top) - 100px); */
        }

        &::scroll-marker-group {
            position: absolute;
            position-anchor: --my-carousel;
            top: calc(anchor(bottom) - 70px);
            justify-self: anchor-center;
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: .8em;
        }

        @media (width <= 768px) {
            flex-basis: 100%;
        }

        li {
            list-style-type: none;
            border: 1px solid #ffff00;
            flex: 0 0 30%;
            scroll-snap-align: center;
            position: relative;

            &::scroll-marker {
                content: attr(data-accName);
                width: 16px;
                height: 16px;
                background-color: transparent;
                border: 2px solid black;
                border-radius: 50%;
                overflow: hidden;
                text-indent: 16px;
            }

            &::scroll-marker:target-current {
                background-color: #ffff00;
            }

            @media (width <= 1024px) {
                flex: 0 0 40%;
            }
            @media (width <= 768px) {
                flex: 0 0 80%;
            }

            a {
                display: block;
                width: 100%;
                height: 100%;
                position: relative;
                text-decoration: none;

                .has-title {
                    &::after {
                        top: 42%;
                    }

                    &:hover::after {
                        transform: translate(-50%, -50%) scale(1.1);
                    }
                }

                &::after {
                    content: '';
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);

                    width: 70px;
                    height: 70px;
                    background-color: rgba(255, 255, 255, 0.8);
                    border-radius: 50%;

                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
                    background-repeat: no-repeat;
                    background-position: center center;
                    background-size: 40px;

                    transition: all 0.3s ease;
                    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
                    pointer-events: none;
                }

                &:hover .thumbnail-overlay-title {
                    color: #ffff00;
                    transition: color 0.3s ease;
                }

                &:hover::after {
                    background-color: #ffff00;
                    transform: translate(-50%, -50%) scale(1.1);
                }

                @media (width <= 768px) {
                    &::after {
                        width: 50px;
                        height: 50px;
                        background-size: 30px;
                    }
                }

                img {
                    width: 100%;
                    height: auto;
                    display: block;
                    max-width: 100%;
                    max-height: 50vh;
                    object-fit: cover;
                    object-position: center;
                }
            }

        }
    }

    .carousel-container-single {
        display: flex;

        ul {
            border: none;
            overflow-x: visible;
            display: block;

            &::scroll-marker-group,
            &::scroll-button(*) {
                display: none;
            }

            li {
                img {
                    max-width: 100%;
                }
            }
        }
    }
}

.carousel-item-placeholder {
    opacity: .2;
    max-width: 25%;
    min-width: 0;
    object-fit: cover;
    flex: 1 1 0;
    align-self: stretch;

    @media (width <= 768px) {
        display: none;
    }
}
.carousel-item-placeholder[data-placeholder="left"] {
    object-position: left center;
}
.carousel-item-placeholder[data-placeholder="right"] {
    object-position: right center;
}

.thumbnail-overlay-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 18px;
    color: white;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    font-size: 0.95rem;
}