_Media.scss

/**
 * Media
 */

/*
 * The base class for all media elements.
 */
@include class('media') {
  display: block;
  @include u-cf();

  /*
   * The class for the floated media element.
   */
  @include element('img') {
    float: left;
    margin-right: rs($basic-spacing);

    > img {
      display: block;
    }

    /*
     * Reverts the order of the elements.
     */
    @include modifier('rev') {
      float: right;
      margin-left: rs($basic-spacing);
      margin-right: 0;
    }

    /*
     * Reduces the visual padding between the content and image.
     */
    @include modifier('compact') {
      margin-right: rs($half-spacing);

      &.media__img--rev {
        margin-left: rs($half-spacing);
        margin-right: 0;
      }
    }
  }

  /*
   * The class for the content beside the media element.
   */
  @include element('body') {
    overflow: hidden;
    display: block;

    // Removes the bottom margin of the last element.
    &,
    > :last-child {
      margin-bottom: 0;
    }
  }
}