.side-image { /////////////////////////////////////////////////////////////////////////////////// $base-line-height: 1.5em !default; $base-accent-color: #477DCA !default; $base-link-color: $base-accent-color !default; $dark-gray: #333 !default; $large-screen: em(860) !default; $base-font-color: $dark-gray !default; p { color: $base-font-color; line-height: $base-line-height; } ////////////////////////////////////////////////////////////////////////////////// $side-image-background-top: #B5EBEB; $side-image-background-bottom: #5DAC5D; $side-image-content-background: #F9F9F9; $side-image-border: 1px solid darken(transparentize($side-image-background-bottom, 0.8), 30%); background: $side-image-content-background; @include media($large-screen) { @include row(table); } .images-wrapper { @include background(url('https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png'), linear-gradient($side-image-background-top, $side-image-background-bottom), no-repeat $side-image-background-top scroll); background-color: $side-image-background-top; background-size: cover; border-bottom: $side-image-border; display: block; min-height: 12em; padding: 3em; @include media($large-screen) { @include span-columns(4); background-position: bottom; background-size: cover; border-right: $side-image-border; } } .side-image-content { @include span-columns(12); padding: 1em 1em 4em 1em; @include media($large-screen) { @include span-columns(8); padding: 4em 4em 8em 4em; } h1 { margin-bottom: 0.9em; } h4 { background: #BBB; color: white; display: inline-block; font-size: 0.75em; font-weight: 800; margin-bottom: 1.3em; padding: 3px 8px; text-transform: uppercase; } p { color: gray; margin-bottom: 3em; } button { @include button(flat, $base-accent-color); padding: 0.7em 1em; } } @include reset-display(); }