// https://m3.material.io/components/carousel/specs

.sd-carousel {
    display: flex;
    gap: 8px;
    padding: 8px 16px;
    flex-wrap: nowrap;
    align-items: stretch;
    overflow: hidden;
    cursor: pointer;
    height: 12rem; // default height
    -webkit-tap-highlight-color: transparent; // remove webkit blue tap effect

    &-item {
        flex: 0;
        transition: all 400ms;
        overflow: hidden;
        border-radius: 2rem;
        position: relative;
    }
    &-value,
    &-value * {
        display: inline-block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all 200ms;
    }

    &-item:hover > &-value {
        transform: scale(1.02);
    }

    &-scrim {
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(
            to bottom,
            transparent,
            transparent 60%,
            rgb(0 0 0 / 0.4)
        );
        color: #fff;
        overflow: hidden;
    }

    &-label {
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 1rem;
        text-wrap: nowrap;
    }
}