.component-events, .component-events-archive-list {
    container-type: inline-size;
    container-name: events;

    :where(.event-intro) {
        margin-left: 4rem;
        padding-right: 2rem;
    }

    :where(.events-container[data-carousel="1"]) ~ :where(.event-intro) {
        margin-left: 0;
        padding-right: 0;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;

        :where(.ctas) {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1rem;
        }
    }

    :where(.component-wrapper) {
        width: 100%;

        :where(.region) {
            container-name: unset;
            container-type: unset;

            :where(.content-wrap) {
                :where(.events-container) {
                    justify-items: center;
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    gap: 1rem;

                    &.slick-slider {
                        display: block;
                    }

                    :where(&> *) {
                        width: 100%;
                    }
                }
            }
        }
    }

    :where(.component-wrapper) {
        position: relative;

        &:hover {
            :where(.carousel-arrows) {
                opacity: 1;
            }
        }
    }

    :where(.carousel-arrows) {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        right: 0;
        width: 100%;
        pointer-events: none;
        opacity: 0;
        transition: opacity 250ms ease-in-out;

        & > 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);
            position: absolute;
            pointer-events: all;
            margin: 0;

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

            &.prev {
                left: 0; /* JS will position ~20px outside container */
            }

            &.next {
                right: 0; /* JS will position ~20px outside container */
            }

            &:hover {
                background: var(--color-primary-white);
                cursor: pointer;

                & > svg path {
                    fill: var(--color-brand-corporate-blue);
                }
            }
        }
    }

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

    .slick-track {
        display: flex
    }

    .slick-slide {
        margin: 0 5px;
        height: inherit;
        width: 31rem;
    }

    .slick-list {
        margin: 0 -5px;
    }
}


@container events (max-width: 100rem) {
    .component-events, .component-events-archive-list {
        :where(.component-wrapper) {
            :where(.region) {
                :where(.content-wrap) {
                    padding-inline: 4rem;

                    :where(.events-container) {
                        &:not(.slick-slider) {
                            grid-template-columns: 1fr 1fr;
                        }

                        &.slick-slider {
                            display: block;
                            max-width: 70rem;
                            margin-inline: auto;
                        }

                        :where(.event-card) {
                            &.slick-slide {
                                width: 35rem;
                            }
                        }
                    }
                    :where(.event-intro){
                        text-align: left;
                        padding-inline: 2rem;
                    }
                }
            }
        }
    }
}

@container events (max-width: 75rem) {
    .component-events, .component-events-archive-list {
        :where(.component-wrapper) {
            :where(.region) {
                :where(.content-wrap) {
                    :where(.events-container) {
                        &:not(.slick-slider) {
                            grid-template-columns: 1fr;
                        }

                        &.slick-slider {
                            display: block;
                            max-width: 35rem;
                            margin-inline: auto;
                        }

                        :where(.event-card) {
                            &.slick-slide {
                                width: 35rem;
                            }
                        }
                    }
                }
            }
        }
    }
}

@container events (max-width: 70rem) {
    .component-events, .component-events-archive-list {
        :where(.component-wrapper) {
            :where(.region) {
                :where(.content-wrap) {
                    :where(.events-container) {
                        grid-template-columns: 1fr;
                    }

                    :where(.event-intro) {
                        text-align: left;
                        align-items: flex-start;
                    }
                    :where(.ctas) {
                        justify-content: flex-start;
                    }
                }
            }
        }
    }
}

@container events (max-width: 45rem) {
    .component-events, .component-events-archive-list {
        :where(.component-wrapper) {
            :where(.region) {
                :where(.content-wrap) {
                    padding-inline: 0;
                    :where(.header){
                        padding-left: 2rem;
                    }
                }
            }
        }
    }
}