main {
    margin: 0 auto;
    max-width: 80rem;
    display: flex;
    flex-wrap: wrap;
    padding: 0 1rem 2rem;
}

.layout-sidebar-first,
.layout-content {
    width: 100%;
    margin-bottom: 2rem;
}

@media all and (min-width: 60rem) { 
    .layout-content {
        width: calc(100% - 20rem);
        padding-right: 6rem;
        box-sizing: border-box;
    }

    .layout-sidebar-first {
        width: 20rem;
    }
}

@media all and (min-width: 82.5rem) { 
    main {
        padding: 0 2rem 2rem;
    }
}

#off-canvas {
    visibility: hidden;
    z-index: -1;
    transition: all ease-in 0.33s;
}

#off-canvas.mm-menu--opened {
    visibility: visible;
    z-index: 1;
    transition: all ease-in 0.33s;
}

.mm-page.mm-slideout {
    background-color: white;
    z-index: 1;
}

#off-canvas.mm-menu a.mm-listitem__text {
    text-overflow: unset;
    white-space: unset;
    overflow: visible;
}

#off-canvas.mm-menu a.mm-listitem__text:hover,
#off-canvas.mm-menu a.mm-listitem__text:focus,
#off-canvas.mm-menu a.mm-listitem__text:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: 3px;
    color: var(--blue-dark);
    outline: 2px solid;
    outline-offset: -5px;
}