.this_month_calendar
{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: calc(1 * var(--sz_margin));
}
    .this_month_calendar > div
    {
        display: grid;
        position: relative;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 1fr);
    }
    .this_month_calendar > div > :nth-child(1),
    .this_month_calendar > div > :nth-child(2),
    .this_month_calendar > div.dow
    {
        display: flex;
        color: white;
        justify-content: center;
        align-items: center;
        padding-top: calc(1 * var(--sz_margin));
        padding-bottom: calc(1 * var(--sz_margin));
    }
    .this_month_calendar > div:not(.dow, .before):hover:before
    {
        content: attr(data-num);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: black;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        border-radius: calc(2 * var(--sz_margin));
    }
    .this_month_calendar > div.dow
    {
        background-color: black;
        border-radius: calc(2 * var(--sz_margin));
    }
    .this_month_calendar > div:not(.dow) > :nth-child(1)
    {
        background-color: green;
        border-top-left-radius: calc(2 * var(--sz_margin));
        border-top-right-radius: calc(2 * var(--sz_margin));
    }
    .this_month_calendar > div:not(.dow) > :nth-child(2)
    {
        background-color: red;
        border-bottom-left-radius: calc(2 * var(--sz_margin));
        border-bottom-right-radius: calc(2 * var(--sz_margin));
    }

.this_month_calendar .today
{
    outline: 2px solid black;
    border-radius: calc(2 * var(--sz_margin));
}