// ---
// title: Media
// description: Place any image- and text-like content side-by-side.
// ---

// <div class="example html">
//   <div class="lego-media">
//     <img src="http://fillmurray.com/50/50" alt="" class="lego-media__img">
//     <div class="lego-media__body">
//       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero similique aut iste, labore esse delectus molestias, beatae sapiente nemo voluptates quam corporis velit harum quia eaque accusantium nam sint fugit!</p>
//     </div>
//   </div>
// </div>

//### Reversed

// <div class="example html">
//   <div class="lego-media">
//     <div class="lego-media__body">
//       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero similique aut iste, labore esse delectus molestias, beatae sapiente nemo voluptates quam corporis velit harum quia eaque accusantium nam sint fugit!</p>
//     </div>
//     <img src="http://fillmurray.com/50/50" alt="" class="lego-media__img--rev">
//   </div>
// </div>

// ### Nested

// <div class="example html">
//   <div class="lego-media">
//     <img src="http://fillmurray.com/50/50" alt="" class="lego-media__img">
//     <div class="lego-media__body">
//       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero similique aut iste, labore esse delectus molestias, beatae sapiente nemo voluptates quam corporis velit harum quia eaque accusantium nam sint fugit!</p>
//       <div class="lego-media push--bottom">
//         <img src="http://fillmurray.com/25/25" alt="" class="lego-media__img">
//         <div class="lego-media__body">
//           <p class="micro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero similique aut iste, labore esse delectus molestias, beatae sapiente nemo voluptates quam nam sint fugit!</p>
//         </div>
//       </div>
//       <div class="lego-media">
//         <img src="http://fillmurray.com/25/25" alt="" class="lego-media__img">
//         <div class="lego-media__body">
//           <p class="micro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero similique aut iste, labore esse delectus molestias, beatae sapiente nemo voluptates quam nam sint fugit!</p>
//         </div>
//       </div>
//     </div>
//   </div>
// </div>

// [---]

@mixin media($responsive: null) {
  @include display(flex);
  @include align-items(flex-start);

  &__img {
    margin-right: spacer(1);
    margin-top: 0.7%; // Aligns image better with text.
  }

  &__img--rev {
    margin-left: spacer(1);
    margin-top: 0.7%; // Aligns image better with text.
  }

  &__body {
    @extend %kill-last-child-margin;
    @include flex(1);
  }

  @if ($responsive) {
    @include breakpoint($max: $responsive) {
      display: block;

      &__img,
      &__img--rev {
        margin-right: 0;
        margin-top: 0;
      }

      &__body {
        @include flex(none);
      }
    }
  }
}

%#{$namespace}media,
.#{$namespace}media {
  @include media;
}