@media screen { .no-sidebar { .site { display: grid; grid-template-columns: auto; grid-template-areas: "header" "main" "footer"; margin: auto; padding: 0 1rem; max-width: 80em; } .site-header { .main { display: flex; flex-flow: column; align-items: center; } .secondary { display: flex; flex-flow: column; align-items: center; } } } } @media screen and (min-width: 48em) { .no-sidebar { .site { padding: 0 2rem; } .site-header { .main { border-bottom: 1px solid $color__grey-lighter; } .secondary { //justify-content: center; } } } } @media screen and (min-width: 80em) { .no-sidebar { .site { padding: 0 3rem; } .site-header { .main { flex-flow: row; align-items: center; justify-content: space-between; } .secondary { } } } }