.component-carousel {
    max-width: 100dvw;
    overflow: hidden;
    container: carousel / inline-size;

    &.content-max-width-small :where(.header) {
        max-width: var(--content-width-small)
    }

    &.content-max-width-medium :where(.header) {
        max-width: var(--content-width-medium)
    }

    &.content-max-width-large :where(.header) {
        max-width: var(--content-width-large)
    }

    .content-wrap {
        max-width: 100dvw;
    }

    :where(.header) {
        color: var(--local-text-color);
        margin-inline: auto;
    }

    :where(.carousel-wrapper) {
        margin-block: 4rem;

        &.no-slick {
            display: flex;
            flex-flow: row;
            gap: 2rem;
            justify-content: center;

        }
    }


    .slick-list {
        overflow: visible;
    }

    :where(.carousel-bottom) {
        margin: 4rem 0;
        display: flex;
        flex-flow: row wrap;
        gap: 3rem;
        align-items: center;
        max-width: 100dvw;
        justify-content: center;

        :where(.carousel-arrow-label) {
            font-weight: 600;
            color: var(--color-brand-corporate-blue);
        }
    }

    :where(.ctas) {
        display: flex;
        flex-flow: row;
        gap: 1rem;
    }

    :where(.carousel-arrows) {

        & > button {
            border-radius: 50%;
            padding: 1rem;
            aspect-ratio: 1 / 1;
            transition: all 250ms ease-in-out;
            background: var(--color-brand-corporate-blue);
            width: 4.4rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: solid 0.2rem var(--color-brand-corporate-blue);

            & > svg path {
                fill: var(--color-primary-white);
            }

            &:nth-child(2) {
                margin-left: 1rem;
            }

            &:hover {
                background: var(--color-primary-white);
                cursor: pointer;
                & > svg path {
                    fill: var(--color-brand-corporate-blue);
                }
            }
        }
    }

    :where([ data-role="prevButton"] svg) {
        transform: rotate(180deg);
    }
}


@container carousel (width < 150rem) {
    .component-carousel {
        .content-wrap {
            padding-inline: 4rem;
        }
    }
}


@container carousel (width < 100rem) {
    .component-carousel {
        .carousel-wrapper.no-slick {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
        }
    }
}

@container carousel (width < 80rem) {
    .component-carousel {
        .carousel-wrapper.no-slick {
            grid-template-columns: 1fr 1fr;
        }
    }
}

@container carousel (width < 45rem) {
    .component-carousel {
        .carousel-wrapper.no-slick {
            grid-template-columns: 1fr;
        }
    }
}