/* ==========================================================================
 * MEDIA STACKED OBJECT
 *
 * Stacked image-with-text object. A simple abstraction to cover a very
 * commonly occurring design pattern.
 *
 * <div class="o-stackedMedia">
 *   <img class="o-stackedMedia__img" />
 *   <div class="o-stackedMedia__body">
 *     <p>Body Content</p>
 *   </div>
 * </div>
 * ========================================================================== */

.o-stackedMedia {
  display: block;
  text-align: center;
}

.o-stackedMedia__img {
  margin-bottom: $globalSpacing;
}

.o-stackedMedia__body {
  display: block;
}




/* Alignment modifiers
 * ========================================================================== */

.o-stackedMedia--right {
  text-align: right;
}

.o-stackedMedia--left {
  text-align: left;
}




/* Spacing Modifiers (margin-bottom)
 *
 * Modify the amount of space between the image and body.
 * ========================================================================== */

@each $spacing-name, $spacing-factor in $globalSpacingFactors {
  .o-stackedMedia--#{$spacing-name} > .o-stackedMedia__img {
    margin-bottom: ($globalSpacing * $spacing-factor);
  }
}