/*------------------------------------*\
  $POSTS
\*------------------------------------*/

.post {
  padding: {
    bottom: 30px;
  }
  margin: {
    bottom: 30px;
  }
  border-bottom: 1px solid $light-grey;
  border-bottom: 1px solid rgba($mid-grey, 0.2);

  p {
    margin: {
      bottom: 10px;
    }

    &:last-child {
      margin-bottom: 0;
    }

    &.post__meta,
    &.post__summary  {
      margin-bottom: 20px;
    }
  }

  &__intro {
    margin: {
      bottom: 20px;
    }
    font: {
      size: font-size(16) !important;
      weight: 700 !important;
      family: $body-font !important;
    }
    text: {
      transform: uppercase;
      decoration: none !important;
    }
    color: #323232
  }

  &__title {
    margin: {
      bottom: 10px;
    }

    a {
      color: $dark-grey;
      text-decoration: none;

      @include states {
        text-decoration: underline;
      }
    }
  }

  &__summary {
    line-height: 1.3;
  }

  &__video {
    position: relative;
    padding-bottom: 56.25%;
    margin: 25px 0;
    height: 0;
    max-width: 100%;
    overflow: hidden;

    iframe,
    object,
    embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }

  &__tags {
    a {
      display: inline-block;
      padding: 3px 10px;
      color: inherit;
      text-decoration: none;
      background: {
        color: #cacaca;
      }

      @include states {
        color: #fff;
        text-decoration: none;
        background: {
          color: $brand;
        }
      }
    }
  }

  &__categories {
    margin-bottom: 15px;

    a {
      color: inherit;
      text-decoration: none;

      @include states {
        text-decoration: underline;
      }
    }
  }

  &--news {
    .post__summary {
      margin-bottom: 0;
    }
  }

  &--brief {
    padding-bottom: 0;
    border-bottom: 0;

    @include mq(mq600) {
      @include span(4 of 8);

      &:last-child {
        @include span(last 4 of 8);
      }
    }

    .post__title {
      margin: {
        bottom: 15px;
      }
      font: {
        family: $body-font;
        weight: 600;
        size: font-size(17);
      }
    }

    .post__meta {
      display: block;
      margin-bottom: 15px;
      font: {
        family: $body-font;
        weight: 300;
        size: font-size(16);
      }
    }

    .post__summary {
      font-size: font-size(15);
      line-height: 1.5;
    }

    a {
      color: $dark-grey;
      text-decoration: none;
    }
  }
}