// Figure
//
// A figure block usually contains an image with a title and a description.
//
// .-left    - Show figure's media to the left of the description.
// .-left.-center - Show a figure's media to the left of the description, with the text vertically centered.
// .-right   - Show figure's media to the right of the description.
// .-medium  - Set figure's media to a fixed "medium" size.
//
// Markup:
//   <article class="figure {{modifier_class}}">
//     <div class="figure__media">
//       <img alt="kitten overlords" src="/styleguide/assets/placeholder.jpg" />
//     </div>
//     <div class="figure__body">
//       <b>Teen Vogue</b> featured Comeback Clothes as one of the ways
//       fashion brands like H&amp;M are taking eco-chic to the next level.
//     </div>
//   </article>
//
// Styleguide Figure
.figure {
  @include clearfix;
  text-align: center;

  // Add extra bottom margin on tiny screens
  @include media($mobile) {
    margin-bottom: ($base-spacing * 2);
  }

  &.-left {
    text-align: left;

    > .figure__media {
      float: left;
      padding-right: gutter();
    }

    > .figure__body {
      overflow: hidden;
      padding-left: gutter();
    }

    &.-center {
      display: table;

      .figure__media {
        margin: 0px;
        display: table-cell;
      }

      .figure__body {
        display: table-cell;
        vertical-align: middle;
      }
    }
  }

  &.-right {
    text-align: left;

    > .figure__media {
      float: right;
      padding-left: gutter();
    }

    > .figure__body {
      overflow: hidden;
      padding-right: gutter();
    }
  }

  &.-medium {
    > .figure__media {
      width: 75px;

      @include media($medium) {
        width: 150px;
      }

      img {
        width: 100%;
      }
    }
  }
}

.figure__media {
  text-align: center;
  margin: 0 auto $base-spacing;

  img {
    margin: 0 auto;
  }
}

.figure__body {
  // Paragraphs should have less spacing in figures
  p + p {
    margin-top: ($base-spacing / 2);
  }
}