#main-container {
    display: grid;
    grid-template-columns: 1fr;
    padding-inline: var(--main-padding);
}

@media screen and (min-width: 900px) {
    #main-container {
        grid-template-columns: 1fr 3fr;
    }
}

@media screen and (min-width: 1300px) {
    #main-container {
        grid-template-columns: 1fr 4fr;
    }
}

@media screen and (min-width: 1700px) {
    #main-container {
        grid-template-columns: 1fr 5fr;
    }
}