/*  COMPONENT: EVENTLIST
//////////////////////////////////////////////////////////////////////////////*/

@layer components {
    .eventlist {
    }
    :not(.page--front) .mod_eventlist li {
        background-color: var(--color-white) !important;
    }
    .eventlist--default {
        display: flex;
        flex-direction: column;
        border-top: 1px solid var(--color-mbz-grey-300);
    }
    .eventlist--default .event {
        border-bottom: 1px solid var(--color-mbz-grey-100);
        background: var(--color-white) !important;
        display: grid;
        grid-template-columns: var(--size-columns-3) 1fr;
        gap: var(--size-gap);
    }
    .eventlist--default .event__image {
    }
    .eventlist--default .event__image .image_container,
    .eventlist--default .event__image .image_container a {
        height: 100%;
    }
    .eventlist--default .event__image img {
        object-fit: cover;
        width: 100%;
    }
    .eventlist--default .event__text {
        justify-content: center;
    }
    .eventlist--front {
    }
    .eventlist--front .without-time .event__date {
        display: none;
    }
    @media (max-width: 680px) {
        .event__text {
            padding-top: 0 !important;
            padding-bottom: var(--spacing-l) !important;
        }
        .eventlist--front .event__text {
            padding-top: var(--spacing-l) !important;
        }
        .eventlist--default .event {
            display: grid;
            grid-template-columns: 100%;
            gap: var(--size-gap);
        }
    }
}