Styleguide

Media

Used to DRY up 1 by 11 `layout__item`s.

Default

Mouse over these & see how the opposite block stays at the top 
.media
  .media__object
    .library-tile.library-tile--grow-on-hover
  .media__body
    .library-tile.library-tile--grow-on-hover
      Mouse over these  see how the opposite block stays at the top

<div class='media'>
  <div class='media__object'>
    <div class='library-tile library-tile--grow-on-hover'></div>
  </div>
  <div class='media__body'>
    <div class='library-tile library-tile--grow-on-hover'>
      Mouse over these & see how the opposite block stays at the top
    </div>
  </div>
</div>

Small

.media.media--small
  .media__object
    .library-tile.library-tile--grow-on-hover
  .media__body
    .library-tile.library-tile--grow-on-hover

<div class='media media--small'>
  <div class='media__object'>
    <div class='library-tile library-tile--grow-on-hover'></div>
  </div>
  <div class='media__body'>
    <div class='library-tile library-tile--grow-on-hover'></div>
  </div>
</div>

Large

.media.media--large
  .media__object
    .library-tile.library-tile--grow-on-hover
  .media__body
    .library-tile.library-tile--grow-on-hover

<div class='media media--large'>
  <div class='media__object'>
    <div class='library-tile library-tile--grow-on-hover'></div>
  </div>
  <div class='media__body'>
    <div class='library-tile library-tile--grow-on-hover'></div>
  </div>
</div>

Flush

no gutters allowed 
.media.media--flush
  .media__object
    .library-tile.library-tile--grow-on-hover
  .media__body
    .library-tile.library-tile--grow-on-hover
      no gutters allowed

<div class='media media--flush'>
  <div class='media__object'>
    <div class='library-tile library-tile--grow-on-hover'></div>
  </div>
  <div class='media__body'>
    <div class='library-tile library-tile--grow-on-hover'>
      no gutters allowed
    </div>
  </div>
</div>

Responsive

It's responsive! 
.media.media--responsive
  .media__object
    .library-tile.library-tile--grow-on-hover
  .media__body
    .library-tile.library-tile--grow-on-hover
      It's responsive!

<div class='media media--responsive'>
  <div class='media__object'>
    <div class='library-tile library-tile--grow-on-hover'></div>
  </div>
  <div class='media__body'>
    <div class='library-tile library-tile--grow-on-hover'>
      It's responsive!
    </div>
  </div>
</div>

Reverse

It's backwards! 
.media.media--rev
  .media__object
    .library-tile.library-tile--grow-on-hover
  .media__body
    .library-tile.library-tile--grow-on-hover
      It's backwards!

<div class='media media--rev'>
  <div class='media__object'>
    <div class='library-tile library-tile--grow-on-hover'></div>
  </div>
  <div class='media__body'>
    <div class='library-tile library-tile--grow-on-hover'>
      It's backwards!
    </div>
  </div>
</div>