* {
    box-sizing:border-box;
}

.row-break {
    height: 0;
    flex-basis: 100%;
}

.wrapper {
    display: grid;
    grid-template-columns: repeat(12, [col-start] 1fr);
    gap: 20px;
}

.wrapper > * {
    grid-column: col-start / span 12;
}

@media (min-width: 500px) {        

    .content, .main-footer {
        grid-column: col-start 4 / span 9;
    }

    nav ul {
        display: flex;
        justify-content: space-between;
    }
}

@media (min-width: 700px) {
    .main-nav {
        grid-column: col-start / span 2;
        grid-row: 2 / 4;
    }

    .content {
        grid-column: col-start 3 / span 8;
        grid-row: 2 / 4;
    }        

    .main-footer {
        grid-column: col-start / span 12;
    }

    nav ul {
        flex-direction: column;
    }
}

/*Override MudBlazor's default styles for vertical tabs. The content wasn't expanding to fill in the horizontal space */
.mud-tabs-panels.mud-tabs-vertical {
    display: inline !important;
}