.columns {
    margin: 0 auto;
    padding: 0 var(--global-spacing);
    display: flex;
    max-width: calc(var(--site-max-width) + var(--global-spacing-2x));
    width: 100%;
    gap: var(--global-spacing);
}

.columns-side {
    flex-grow: 0;
    flex-shrink: 0;
    max-width: 260px;
    width: 100%;
}

.columns-left {
    order: 1;
}

.columns-right {
    order: 3;
}

.columns-centre {
    flex-grow: 1;
    flex-shrink: 1;
    order: 2;
}

@media (max-width: 1039px) {
    .columns {
        flex-direction: column;
        gap: var(--global-spacing-2x);
    }

    .columns-left {
        order: 2;
    }

    .columns-centre {
        order: 1;
    }

    .columns-side {
        max-width: 100%;
    }
}