body {
    margin: 0;
    padding: 1rem;
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -moz-text-size-adjust: none;
}

.calendar {
    margin: 0 auto;
    max-width: 60rem;
    font-family: sans-serif;
    border-collapse: collapse;
    font-size: 14px;
}

.calendar thead tr {
    background: var(--color-bg-heading, #133D96);
    color: var(--color-text-heading, #FFFFFF);
    font-weight: bold;
}

.calendar .subheading,
.calendar tr.subheading:nth-child(2n) {
    background: var(--color-bg-subheading, #4A86E8);
    color: var(--color-text-subheading, #FFFFFF);
    font-weight: bold;
    text-align: center;
}

.calendar td {
    padding: .75rem 1rem;
    vertical-align: middle;
    border-collapse: collapse;
    border: 1px solid #F0F0F0;
}
.calendar td:first-child {
    white-space: nowrap;
}

.calendar tr:nth-child(2n) {
    background: #F9F9F9;
}

@media (max-width: 640px) {

    body {
        padding: 0;
    }

    .calendar td {
        padding: .25rem .5rem;
        font-size: 12px;
    }

}