.calendar-container {
    grid-area: cards;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
    padding: var(--spacing-6);
    overflow-y: auto;
}

@media (max-width: 639px) {
    .calendar-container {
        padding: var(--spacing-4);
        gap: var(--spacing-4);
    }
}

@media (min-width: 1080px) {
    .calendar-container {
        display: grid;
        grid-template-columns: 1fr 300px;
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "header events"
            "grid events";
        gap: var(--spacing-6);
        align-items: start;
    }

    .calendar-header {
        grid-area: header;
        justify-content: center;
    }

    .calendar-grid {
        grid-area: grid;
    }

    .calendar-events {
        grid-area: events;
    }
}

@media (min-width: 1920px) {
    .calendar-container {
        grid-template-columns: 1fr 400px;
        gap: var(--spacing-8);
    }
}

@media (min-width: 2560px) {
    .calendar-container {
        grid-template-columns: 1fr 500px;
    }
}

@media (min-width: 3840px) {
    .calendar-container {
        grid-template-columns: 1fr 600px;
    }
}