@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; .main { display: flex; flex-flow: column; align-items: initial; justify-content: space-between; padding-left: 1rem; } .secondary { display: flex; flex-flow: column; align-items: end; } } .site-main { padding: 0 1rem; } .site-footer { } .home-featured { padding: 0 1rem; } .xarxaprod-destacats,.xarxaprod-featured, .xarxaprod-last-convos,.xarxaprod-ultimes-convocatories, .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 { display: grid; grid-template-columns: 1fr 1fr; padding: 0.5rem 0; align-items: center; } .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 { display: grid; grid-template-columns: 1fr minmax(0, 35em) minmax(0, 35em) 1fr; grid-template-areas: "main " "secondary "; margin: auto; padding: 0; .main { grid-column: 2/4; flex-flow: row; align-items: center; width: 100%; } .secondary { grid-column: 2/4; align-items: center; width: 100%; } } .site-main { padding: 0 2rem; } .site-footer { } .home-featured { padding: 0 2rem; } &.single { .site-main { width: 45rem; margin: 0 auto; } } .xarxaprod-destacats,.xarxaprod-featured, .xarxaprod-last-convos,.xarxaprod-ultimes-convocatories, .archive-posts { grid-template-columns: repeat(3 , 1fr); } .xarxaprod-faqs-aside { display: flex; flex-direction: row; align-items: center; justify-content: space-between; .xarxaprod-search-form { &:hover,&:active,&:focus,&:target { flex-grow: 1; } } } } @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; } }