$media-border-width: 1px !default;
$media-border-color: createColor(#e9ecef) !default;
$media-padding-top: 1rem !default;
$media-margin-top: 1rem !default;

%media-divide {
  border-top: var(--border-width) solid var(--border-color);
  margin-top: var(--margin-top);
  padding-top: var(--padding-top);
}

.media {
  --border-width: #{$media-border-width};
  --border-color: #{$media-border-color};
  --padding-top: #{$media-padding-top};
  --margin-top: #{$media-margin-top};

  align-items: flex-start;
  display: flex;

  & + .media {
    @extend %media-divide;
  }

  &__content {
    flex:auto;

    & .media {
      @extend %media-divide;
    }
  }

  &__left {
    margin-right: 1rem;
  }

  &__right {
    margin-left: 1rem;
  }
}