Millwood Online mixin

style.scss

@mixin body-background($width) {
  @media (max-width: #{$width}px) {
    $height: $width / 3.26853707;
	  background-image: url('http://res.cloudinary.com/hghr6de3u/image/upload/c_scale,q_75,w_#{$width}/AbergavennyBackground_lldg0t.jpg');
    #banner {
      height: #{$height}px;
      @if $width > 768 {
        padding-top: 5em;
      }
      @else {
        padding-top: 2em;
      }
      > div {
        h1, h3 {
          background-color: rgba(255, 255, 255, 0.8);
          padding: #{$height / 20}px;
          display: inline;
        }
        h1 {
          font-size: #{$height / 8}px;
          line-height: #{$height / 3}px;
        }
        h3 {
          font-size: #{$height / 9}px;
          line-height: #{$height / 4}px;
        }
      }
    }
  }
}