.calendarlist{
    margin-top: 20px;
}

.calendarlist.nextevent {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    --calendar-card-height: 92px;
    --calendar-card-gap: 20px;
    min-height: calc((var(--calendar-card-height) * 12) + (var(--calendar-card-gap) * 11));
 }

.calendarlist .eventcard {
    min-height: var(--calendar-card-height);
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .calendarlist.nextevent {
        grid-template-columns: 1fr;
        min-height: calc((var(--calendar-card-height) * 24) + (var(--calendar-card-gap) * 23));
    }
}