article.post {
  margin-bottom: 30px;
  overflow: hidden;

  .content {
    padding: 40px 150px;

    @include media($small-screen) {
      padding: 30px 100px;
    }

    @include media($tablet) {
      padding: 30px 50px;
    }

    @include media($mobile) {
      padding: 20px;
    }
  }

  h3.title {
    font-size: em(32, 15);
    font-weight: 800;
    line-height: 1.3em;
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
  }

  div.metadata {
    @extend %blog-metadata;
    font-size: $base-font-size-1;
  }

  p, blockquote {
    font-family: $serif;
    font-size: $base-font-size-2 - 1;
    line-height: 1.85;
    margin: 2em 0;

    @include media($mobile) {
      font-size: $base-font-size-1;
    }
  }

  blockquote {
    $border-size: 4px;
    $margin-left: 41px;
    border-left: $border-size solid $nav-hover;
    color: lighten($base-font-color, 12%);
    font-style: italic;
    margin-left: -$margin-left;
    padding-left: $margin-left - $border-size;
  }
}

div.attribution {
  font-size: $base-font-size-small-2;
  opacity: 0.7;
}

article.post {
  .imagery {
    background-repeat: no-repeat;
    background-size: cover;
    height: 200px;
    background-image: image_url('blog/imagery/default.jpg');
    background-position: 50% 85%;

    &.lightning {
      background-image: image_url('blog/imagery/lightning.jpg');
      background-position: 50% 38%;
    }

    &.storm {
      background-image: image_url('blog/imagery/storm.jpg');
      background-position: 50% 58%;
    }

    &.rain {
      background-image: image_url('blog/imagery/rain.jpg');
      background-position: 50% 46%;
    }

    &.overcast {
      background-image: image_url('blog/imagery/overcast.jpg');
      background-position: 50% 98%;
    }

    &.clouds {
      background-image: image_url('blog/imagery/clouds.jpg');
      background-position: 50% 30%;
    }

    &.sunny {
      background-image: image_url('blog/imagery/sunny.jpg');
      background-position: 50% 50%;
    }

    &.sunset {
      background-image: image_url('blog/imagery/sunset.jpg');
      background-position: 50% 48%;
    }

    &.autumn {
      background-image: image_url('blog/imagery/autumn.jpg');
      background-position: 50% 33%;
    }

    &.desert {
      background-image: image_url('blog/imagery/desert.jpg');
      background-position: 50% 42%;
    }

    &.tornado {
      background-image: image_url('blog/imagery/tornado.jpg');
      background-position: 50% 78%;
    }

    &.snow {
      background-image: image_url('blog/imagery/snow.jpg');
      background-position: 50% 40%;
    }
  }
}
