@layer genr.component {
    .event-list-filters {
        max-width: var(--width-lg);
        margin: 0 auto;
        padding-inline: 1.5rem;

        @media (width > 1280px) {
            padding-inline: 0;
        }
    }

    .event-list-filters__header {
        .headline {
            font-weight: 700;
        }
    }

    .event-list-filters__items {
        list-style: none;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 1rem;

        @media (width > 768px) {
            flex-direction: row;
            flex-wrap: wrap;
        }
    }

    .event-list-filters__item {
        .button {
            width: 100%;
        }
    }

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

        @media (width > 1280px) {
            padding-inline: 0;
        }
    }

    .event-list__header {
        .headline {
            color: var(--color-light-patrol);
            /* font-weight: 700; */
        }
    }

    .event-list__items {
        list-style: none;
        margin: 2rem 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        /* gap: 2.5rem; */
    }

    .event-list__item {
        border-bottom: 1px solid var(--color-border);

        &:first-child {
            border-top: 1px solid var(--color-border);
        }

        .item__link {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            padding-block: 2.5rem;
            text-decoration: none;
            transition: calc(var(--transition-duration) / 2);

            &::before {
                content: '';
                position: absolute;
                inset: -1px -1rem;
                background-color: color-mix(in srgb, var(--color-border) 50%, var(--color-dark-green) 50%);
                border: 1px solid var(--color-border);
                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 {
            display: flex;
            gap: 0.5rem;
            align-items: center;
            flex-wrap: wrap;

            .headline {

                font-weight: 700;
                color: var(--color-light-patrol);

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

            .chip {
                margin-left: 0.5rem;
            }
        }

        .item__dates {
            font-weight: 700;
        }

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