.calendar {
    margin-top: 2rem;
    margin-left: 1rem;
    margin-right: 1rem;
    display: grid;
    grid-template-columns: auto auto auto;
    column-gap: .25rem;
    row-gap: .25rem;
}

.calendar > * {
    background: var(--clr-hover-grey);
    padding: .5rem;
    max-width: 100%;
}

.calendar a,
.calendar p {
    font-size: .8rem;
    line-height: 1;
    word-break: break-word;
    max-width: 100%;
}


.booking-row {
    background: #75d877;
}

.no-booking {
    background: var(--clr-hover-grey);
}

.calendar-header {
    background: var(--clr-inkwell);
    color: white;
    margin: 0;
}

.month {
    background: var(--clr-inkwell);
    color: white;
    grid-column: 1/ span 3;
}

.blank-line {
    grid-column: 1/ span 3;
    background:transparent;
}

.trip-column:hover {
    background: var(--clr-ultimate-grey);
    cursor: pointer;
    color: white;
}

.month-header {
    letter-spacing: 2px;
}

@media only screen and (min-width: 40em) {
    .calendar {
        width: fit-content;      
        column-gap: .25rem;
        row-gap: .25rem;
        margin: 4rem auto;
    }

    .calendar > * {
        padding: 1em 1.5em;
    }
        .calendar a,
        .calendar p {
            font-size: 1rem;
            line-height: 1.4;
            word-break: break-word;
        }


    .calendar-header {
        margin: 0;
    }

    .month-header {
        letter-spacing: 2px;
    }
}