@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 { position: sticky; z-index: 900; top: 0; background-color: $color__white; .main { display: flex; flex-flow: row; align-items: center; justify-content: space-around; } .secondary { display: flex; flex-flow: column; align-items: center; } } .site-main { h1,h2,h3,h4,h5,h6,.entry-content { margin:0; } } } } @media screen and (min-width: 48em) { .no-sidebar { .site { padding: 0 2rem; } .site-header { .main { flex-flow: column; 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 { } } } }