main {
    margin: 0 max(0px, 10vw - 60px, 25vw - 300px, 45vw - 800px); /* Magic numbers - slightly increases the margins as you go from 0 to 600px to 1600px to 2500px to beyond */
}

main > article {
    width: 100%;
}

main > article,
.sidebar2 > div,
.sidebar2 > aside {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sidebar2 > div {
    flex-grow: 1;
    max-width: calc(100% - 300px);
}

.sidebar2 > aside {
    flex-grow: 0;
    width: 300px;
}

.sidebar2 {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.sidebar--inverse {
    flex-direction: row-reverse;
}

@media only screen and (max-width: 867px) {
    .sidebar2 {
        flex-direction: column;
    }

    .sidebar2 > div {
        max-width: 100%;
    }

    .sidebar2 > aside {
        flex-grow: 1;
        width: 100%;
    }
}
