/// /// Forty by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// /* Spotlights */ .spotlights { border-top: 0 !important; & + * { border-top: 0 !important; } > section { @include vendor('display', 'flex'); @include vendor('flex-direction', 'row'); background-color: desaturate(lighten(_palette(bg-alt), 2), 1); > .image { background-position: center center; background-size: cover; border-radius: 0; display: block; position: relative; width: 30%; img { border-radius: 0; display: block; width: 100%; } &:before { background: transparentize(_palette(bg), 0.1); content: ''; display: block; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; width: 100%; } } > .content { @include vendor('display', 'flex'); @include vendor('flex-direction', 'column'); @include vendor('justify-content', 'center'); @include vendor('align-items', 'center'); @include padding(2em, 3em); width: 70%; > .inner { margin: 0 auto; max-width: 100%; width: _size(inner); } } &:nth-child(2n) { @include vendor('flex-direction', 'row-reverse'); background-color: desaturate(lighten(_palette(bg-alt), 4), 2); > .content { @include vendor('align-items', 'flex-end'); } } } @include breakpoint('<=xlarge') { > section { > .image { width: 40%; } > .content { width: 60%; } } } @include breakpoint('<=large') { > section { > .image { width: 45%; } > .content { width: 55%; } } } @include breakpoint('<=medium') { > section { display: block; > .image { width: 100%; } > .content { @include padding(4em, 3em); width: 100%; } } } @include breakpoint('<=small') { > section { > .content { @include padding(3em, 1.5em); } } } }