:root {
    --site-width: 1440px;
    --page-padding: min(7vw, 40px);
    --topbar-height: 65px;
}

body.scrolled {
    --topbar-height: 45px;
}

.volito-grid-justify-center {
    justify-content:center;
}

.volito-footer-grid-inner {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 100%;
    grid-template-rows: [row] auto [row];
}

@media (max-width: 575.98px) {
    .wrapper-umbraco {
        padding: 0 5%;
    }

    .wrapper {
        display: grid;
        width: 90%;
        grid-template-columns: auto;
        grid-template-rows: auto;
    }

    .sidebar-left {
        grid-row: 2 / 3;
    }

    .content {
        grid-row: 1 / 2;
    }

    .subhead {
        flex-grow: 1;
    }

    .sidebar-right {
        grid-row: 3 / 4;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .wrapper {
        display: grid;
        grid-template-columns: 20% 5% auto;
        grid-template-rows: auto;
    }

    .sidebar-left {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }

    .content {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
        display: flex;
        flex-wrap: wrap;
    }

    .subhead {
        flex-grow: 1;
    }

    .sidebar-right {
        grid-column: 1 / 4;
        grid-row: 2 / 3;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .wrapper-umbraco {
        max-width: 960px;
    }

    .wrapper {
        display: grid;
        grid-template-columns: 200px 40px auto 40px 200px;
        grid-template-rows: auto;
        max-width: 960px;
    }

    .sidebar-left {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }

    .content {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
        display: flex;
        flex-wrap: wrap;
    }

    .subhead {
        flex-grow: 1;
    }

    .sidebar-right {
        grid-column: 5 / 6;
        grid-row: 1 / 2;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .wrapper-umbraco {
        max-width: 960px;
    }

    .wrapper {
        display: grid;
        grid-template-columns: 200px 40px auto 40px 200px;
        grid-template-rows: auto;
        max-width: 960px;
    }

    .sidebar-left {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }

    .content {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
        display: flex;
        flex-wrap: wrap;
    }

    .subhead {
        flex-grow: 1;
    }

    .sidebar-right {
        grid-column: 5 / 6;
        grid-row: 1 / 2;
    }
}

@media (min-width: 1200px) {
    .wrapper-umbraco {
        max-width: 1140px;
    }

    .wrapper {
        display: grid;
        grid-template-columns: 200px 40px auto 40px 200px;
        grid-template-rows: auto;
        max-width: 1140px;
    }

    .sidebar-left {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }

    .content {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
        display: flex;
        flex-wrap: wrap;
    }

    .subhead {
        flex-grow: 1;
    }

    .sidebar-right {
        grid-column: 5 / 6;
        grid-row: 1 / 2;
    }
}