:root {
    --main-background-color: inherited;
}

.main-content {
    background-color: var(--main-background-color);
    padding-bottom: var(--spacing-medium);
    margin: -5rem auto 5rem;
    flex-grow: 1;
    width: 100%;
}

.main-content.ignore-margin {
    margin: 0 auto;
}

.main-content > .content {
    padding: 0 var(--spacing-medium);
}

@media (max-width: 1200px) {

    .main-content {
        margin: -4rem auto 4rem;
    }   

}

@media (max-width: 900px) {

    .main-content {
        margin: -3rem auto 3rem;
    }   

}

@media (max-width: 600px) {

    .main-content {
        margin: -2rem auto 2rem;
    }   

}