.upcoming-events {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "featured featured" ". .";
    gap: var(--font-sm);
    margin: 1em 0 2em;

    @media screen and (max-width: 768px) {
        grid-template-columns: 1fr;
        grid-template-areas: "featured" ".";
    }
}

.no-upcoming {
    margin: 6em 2em;
    text-align: center;
    line-height: 1.3em;
}

.event-card {
    display: grid;
    grid-template-columns: min-content auto;
    grid-template-rows: min-content auto;
    grid-template-areas: "date title" "details details";
    overflow: hidden;
    color: var(--color-white);
    background-size: cover;
    background-color: var(--background-image-mix);
    background-position: center;
    background-blend-mode: soft-light;

    &.featured {
        grid-area: featured;
    }

    h3.date {
        width: calc(104px - var(--font-xs) * 2);
        height: calc(138px - var(--font-xs) * 2);
        margin: 0;
        grid-area: date;
        padding: var(--font-xs);
        display: flex;
        flex-direction: column;
        gap: .1em;
        align-items: center;
        background-color: var(--color-brand);

        .month {
            font-size: var(--font-xs);
            text-transform: uppercase;
        }

        .day {
            font-size: 1.3em;
        }

        .time {
            font-size: .4em;
            font-weight: normal;
            white-space: nowrap;
        }
    }

    .title {
        padding: 0 .5em;
        margin-bottom: 0;
        font-size: 2.5em;
        line-height: 1.1em;
    }

    .details {
        padding: 0 1em .5em;
        grid-area: details;
        display: flex;
        justify-content: end;
        align-items: end;
    }
}

.past-events {
    margin: 1em 0 2em;
    overflow: hidden;

    .event-card {
        grid-template-columns: auto min-content;
        grid-template-areas: "info details";
        background: transparent;
        padding: 1.25em 1.25em 1em;
        margin: .5em 0;
        background-color: var(--color-black);
        transition: background-color .3s ease;
        cursor: pointer;
        background-color: var(--color-black);

        &:hover {
            background-color: var(--color-accent);
        }

        .info {
            color: var(--color-white);
        }

        .date {
            width: min-content;
            height: min-content;
            background-color: transparent;
            flex-direction: row;
            gap: .25em;
            padding: 0;

            .month,
            .day,
            .time {
                font-size: .4em;
            }
        }

        .title {
            font-size: 1.5em;
            padding: 0;
            line-height: 1em;

            @media screen and (max-width: 768px) {
                font-size: 1em;
            }
        }

        .button {
            padding: 0 2.5em;
        }
    }
}