.carousel {
    width:100%;
    overflow-x:auto;
    display: flex;
    margin-top:10px;
    gap:1em;
    scroll-behavior:smooth;
    anchor-name:--carousel;
    scroll-snap-type: x mandatory;
    scroll-marker-group:after;
   
    &::scroll-marker-group {
        display:flex;
        justify-content:center;
        gap:.5em;
        margin-top:10px;
    }

    &::-webkit-scrollbar {
        display:none;
    }

    &::scroll-button(right), &::scroll-button(left) {
        content: '>';
        border:none;
        background-color: var(--color-primary);
        font-family: consolas;
        font-size:3em;
        color:white;
        height:60px;
        width:60px;
        border-radius:50%;
        padding-bottom:.2em;
        cursor:pointer;
        position:fixed;
        position-anchor:--carousel;
        position-area:right center;
        translate:-50%;
    }

    &::scroll-button(left) {
        content: '<';
        position-area:left center;
        translate:50%;
    }

    &::scroll-button(right):disabled, &::scroll-button(left):disabled {
        opacity: 0.5;
        cursor: auto;
    }
    
    .card {
        scroll-snap-align:start;
        flex: 0 0 25em;
        /*height:16em;*/
        aspect-ratio: 5 / 3;
        background-color: var(--color-canvas);
        padding:1em;
        border-radius:.5em;
        text-align:center;
        background-size:cover;
        background-position-y: 40px;
        position:relative;
        contain:paint;
        /*border: 3px solid var(--color-cardhead);*/

        .card-titel {
            position:absolute;           
            top:0;
            left:0;
            width:100%;
            background-color: var(--color-cardhead);
            text-align:center;
            color: var(--color-cardheadtext);
            font-size:1.3em;
            min-height:65px;
            padding:8px;
            line-height:normal;
            align-content: center;
        }

        &::scroll-marker {
            content:'';
            height: 1em;
            width: 1em;
            background-color: var(--color-subtle);
            border-radius:50%;
        }

        &::scroll-marker:target-current {
            background-color: var(--color-primary);
        }
    }
}

@media(max-width: 500px) {
    .card {
        flex: 0 0 100%;
    }
}