@media (max-width: 1840px) {
    .calendar-grid {
        grid-template-columns: repeat(7, 1fr);
        gap: 20px;
        margin-top: 5em;
    }

    .calendar-intro {
        margin-top: 10em;
        margin-bottom: -3em;
    }
}

@media (max-width: 1470px) {
    .calendar-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 20px;
    }
}

@media (max-width: 1260px) {
    .calendar-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 20px;
        margin-top: 8em;
    }

    .calendar-intro {
        margin-top: 8em;
        margin-bottom: -5em;
    }
}

@media (max-width: 1070px) {
    .calendar-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
}

@media (max-width: 860px) {
    .calendar-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

@media (max-width: 640px) {
    .calendar-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 420px) {
    .calendar-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }
}