.event {
    display: grid;
    grid-template-areas: "image title" "image date" "image text";
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto 1fr;
    grid-column-gap: 16px;
    grid-row-gap: 8px;

    @media (max-width: 640px) {
        grid-template-areas: "title" "date" "image" "text";
        grid-template-columns: auto;
        grid-template-rows: auto auto auto auto;
    }

    .event-title {
        grid-area: title;
        font-weight: 500;
        font-size: calc(28px / 1.5);
    }

    .event-date {
        grid-area: date;
    }

    .event-text {
        grid-area: text;
    }

    .event-image {
        grid-area: image;
        border-radius: 4px;
        width: 232px;
        aspect-ratio: 4 / 2;
        object-fit: cover;

        @media (max-width: 640px) {
            width: 100%;
            aspect-ratio: 4 / 2;
        }
    }
}

.event + .event {
    margin-top: 24px;
}