/* Main */
#main { @include vendor('flex-grow', '1'); @include vendor('flex-shrink', '1'); width: 100%; > .inner { @include padding(0, 5em); margin: 0 auto; max-width: 110em; > section { @include padding(4em, 0); border-top: solid 2px _palette(border); &:first-of-type { border-top: 0 !important; } } } @include breakpoint('<=xlarge') { > .inner { @include padding(0, 4em); > section { @include padding(3em, 0); } } } @include breakpoint('<=large') { > .inner { @include padding(0, 3em); > section { @include padding(3em, 0); } } } @include breakpoint('<=small') { > .inner { @include padding(0, 2em); > section { @include padding(2em, 0); } } } }
// main > .inner { padding: 0 5em 0.1em 5em ; } // main > .inner > section { padding: 4em 0 3em 0 ; } // @media screen and (max-width: 1680px) { // main > .inner { padding: 0 4em 0.1em 4em ; } // main > .inner > section { padding: 3em 0 2em 0 ; } // } // @media screen and (max-width: 1280px) { // main > .inner { padding: 0 3em 0.1em 3em ; } // main > .inner > section { padding: 3em 0 2em 0 ; } // } // @media screen and (max-width: 736px) { // main > .inner { padding: 0 2em 0.1em 2em ; } // main > .inner > section { padding: 2em 0 1em 0 ; } // }