@layer genr.component {

    .event-list-teaser__background {
        background-color: var(--color-sun-yellow);
    }

    .event-list-teaser {
        max-width: var(--width-lg);
        margin: 0 auto;
        color: var(--color-darker-green);
        display: flex;
        flex-direction: column;
        padding: 4rem 1.5rem 4.5rem 1.5rem;

        @media (width > 1280px) {
            padding: 7.5rem 0 8rem 0;
        }
    }

    .event-list-teaser__header {
        display: inline-block;
        width: fit-content;
        text-align: left;
        /* padding-bottom: 1.5rem; */
    }

    .event-list-teaser__header .headline {
        font-weight: bold;
        display: inline;
        position: relative;
    }

    /* .event-list-teaser__header:has(.event-list-teaser__highlight) {
        padding-bottom: 2.5rem;
    }

    .event-list-teaser__highlight {
        display: inline-block;
        vertical-align: middle;
        transform: translateX(-3.5rem) translateY(2.5rem);
    }

    .event-list-teaser__highlight > svg {
        fill: var(--color-signal-violet);
    } */

    .event-list-teaser__items {
        list-style: none;
        padding: 0;
    }

    .event-list-teaser__item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        border-bottom: 1px solid color-mix(in srgb, var(--color-darker-green) 25%, var(--color-sun-yellow) 75%);
        transition: calc(var(--transition-duration) / 2);

        .item__link {
            display: block;
            width: 100%;
            position: relative;
            padding-block: 2.5rem;
            text-decoration: none;

            &::before {
                content: '';
                position: absolute;
                inset: -1px -1rem;
                background-color: color-mix(in srgb, var(--color-white) 15%, var(--color-sun-yellow) 85%);
                border: 1px solid color-mix(in srgb, var(--color-darker-green) 15%, var(--color-sun-yellow) 85%);
                opacity: 0;
                transition: var(--transition-duration);
                z-index: -1;
                border-radius: 0 1.25rem;
            }

            &:hover {
                &::before {
                    opacity: 1;
                }
            }

            &:active {
                transform: scale(0.99);
            }
        }

        .item__header {
            font-weight: 700;
            line-height: 2rem;
            font-size: 1.125rem;
            letter-spacing: 0.025rem;

            @media (width > 768px) {
                font-size: 1.375rem;
                letter-spacing: 0.0125rem;
            }
        }

        .item__content {
            margin-top: 0.5rem;
        }
    }
}