.event-calendar {
    display: flex;
    flex-direction: column;

    color: var(--body-color);
    font-family: var(--font-family-body);
    text-align: center;

    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-fernuni-ultralight);
    background: white;
    width: 4.75rem;
    height: 4.75rem;
    overflow: hidden;
    margin: 1rem;

    @container screen (min-width: 48rem) {
        margin: 2.5rem 2.5rem 2.5rem 1.125rem;
    }
}

.event-calendar-month {
    display: flex;
    align-items: center;
    justify-content: center;

    background-color: var(--color-fernuni-ultralight);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1rem;
}

.event-calendar-day {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    font-size: 2.5rem;
    line-height: 100%;

    margin-top: auto;
    margin-bottom: auto;
}