@media screen { .no-sidebar { } .site { display: grid; grid-template-columns: 1fr minmax(0,35em) minmax(0,35em) 1fr; grid-template-areas: "header" "main" "aside" "footer"; margin: auto; padding: 0; > header { grid-column: 1 / -1; } > main { grid-column: 2 / 4; } > aside { grid-column: 2 / 4; } > footer { grid-column: 1 / -1; } } .site-header { position: sticky; z-index: 900; top: 0; margin-bottom: 2rem; //background-color: $color__white; //box-shadow: 0 15px 30px rgba(0,0,0,0.05), 0 1px 0 0 rgba(0,0,0,0.0); .main { display: flex; flex-flow: row; align-items: center; justify-content: space-around; } .secondary { display: flex; flex-flow: column; align-items: center; } } .site-main { padding: 0 1rem; } .site-footer { } .home-featured { padding: 0 1rem; } .xarxaprod-destacats,.xarxaprod-featured,.archive-posts { display: grid; grid-template-columns: repeat(1 , 1fr); gap: $grid__gap; } } @media screen and (max-width: 48em) { //only smaller than 48em .site-header { } .site-main { } .site-footer { } .page-template-funds-search { } .home-featured { } } @media screen and (min-width: 48em) { //only bigger than 48em .site { > header { } > main { } > aside { } > footer { } } .site-header { .main { flex-flow: column; } .secondary { //border-top: 1px solid $color__grey-lighter; } } .site-main { padding: 0 2rem; } .site-footer { } .home-featured { padding: 0 2rem; } &.single { .site-main { //width: 45rem; margin: 0 auto; } } .xarxaprod-destacats,.xarxaprod-featured,.archive-posts { grid-template-columns: repeat(4 , 1fr); } } @media screen and (min-width: 80em) { //only bigger than 80rem .site { > header { } > main { } > aside { } > footer { } } .site-header { .main { //width: 80em; margin: auto; flex-flow: row; } .secondary { } } .site-main { padding: 0; } .site-footer { } .home-featured { padding: 0; } }