.picwide, .cluster, .pic960 { // this clever bit comes from https://css-tricks.com/full-width-containers-limited-width-parents/ // I tweaked it slightly to add a bit of margin width: 96vw; position: relative; left: 48%; right: 48%; margin-left: -46vw; margin-right: -50vw; @include breakpoint(gamma) { width: 98vw; position: relative; left: 49%; right: 49%; margin-left: -48.5vw; margin-right: -49.5vw; } @include breakpoint(epsilon) { $margin: ($max_width - $narrow-max-width)/2; left: 0; right: 0; margin-left: -$margin; margin-left: -$margin; width: $max_width; max-width: $max_width; } } p + .picwide { margin-top: 1.5rem; @include breakpoint(gamma) { margin-top: 2.5rem; } } .picwide + p { margin-top: 1.5rem; @include breakpoint(gamma) { margin-top: 2.5rem; } } .cluster { margin-bottom: 2rem; margin-top: 2rem; @include breakpoint(gamma) { margin-bottom: 3rem; margin-top: 3rem; } } .row-2 { a:last-of-type img, figure:last-of-type { width: 49.7%; float: right; margin-right: 0; } a:first-of-type img, figure:first-of-type { width: 49.7%; float: left; margin-left: 0; margin-right: .3%; } &:after { @extend %clearfix; margin-bottom: .5rem; } figure:first-of-type img, figure:last-of-type img { width: 100%; } } .banner .post-image { // this clever bit comes from https://css-tricks.com/full-width-containers-limited-width-parents/ // I tweaked it slightly to add a bit of margin width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } .embed-wrapper { @include constrain_wide; @include breakpoint(gamma) { margin-left: auto; margin-right: auto; } } .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; margin-bottom: 1rem; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .pullpicleft { display: none; @include breakpoint(gamma) { display: block; float: left; margin-left: -280px; padding-right: 1rem; } }