// Media
//
// Extends Bulma media object.
//
// Styleguide: Component.Media

.media + .media,
.media .media {
  padding-top: 0;
  border-top: 0;
}


// Comments
//
// Extends Bulma media object for use in blog comments.
//
// Styleguide: Component.Media.Comment

.media.media-comment {
  display: block;
  @extend %bigborder;
  border-top-width: 2px;
  border-top-color: $grey;
  padding-top: $gap;
  padding-bottom: $gap;
  & + .media.media-comment,
  & .media.media-comment {
    @extend %bigborder;
    border-top-width: 2px;
    border-top-color: $grey;
  }
  .media-left {
    font-family: $family-monospace;
    color: $blue-light;
    padding-bottom: 1rem;
  }
  .media-comment {
    margin-top: $gap;
    margin-bottom: $gap * -1.5;
  }
  @include tablet {
    display: flex;
    .media-left {
      width: 12em;
    }
  }
}

// Media List
//
// Extends Bulma media object for use in blog teaser list.
//
// Styleguide: Component.Media.List

.media-list {
  .media,
  .media + .media {
    margin-top: $gap;
    margin-bottom: $gap * 2;
  }
}
