/*------------------------------------*\
  #PHOTO
\*------------------------------------*/

/* The primary class for displaying images that take up the full-width allowed
 * to them.
 *
 * Usage:

    <figure class="photo">
      <a class="photo__link" src="http://example.com">
        <img class="photo__image" src="/img/example.jpg" alt="An Example Image">
      </a>

      <figcaption class="photo__caption">
        A caption that appears below the image.
      </figcaption>
    </figure>

 */

.photo {}

  .photo__link {
    // Remove the default border applied to links so it doesn't appear behind
    // the image.
    border-bottom: none;
  }

  .photo__image {
    // Keeps the photo and caption close together.
    margin-bottom: $inuit-global-spacing-unit-small;
  }

  .photo__caption {
    @extend %fine-print;
    @extend %centered-text;
    font-style: italic;
  }

/*------------------------------------*\
  #PHOTO
\*------------------------------------*/

/* The primary class for displaying images that take up the full-width allowed
 * to them.
 *
 * Usage:

    <figure class="photo">
      <a class="photo__link" src="http://example.com">
        <img class="photo__image" src="/img/example.jpg" alt="An Example Image">
      </a>

      <figcaption class="photo__caption">
        A caption that appears below the image.
      </figcaption>
    </figure>

 */

.photo {}

  .photo__link {
    // Remove the default border applied to links so it doesn't appear behind
    // the image.
    border-bottom: none;
  }

  .photo__image {
    // Keeps the photo and caption close together.
    margin-bottom: $inuit-global-spacing-unit-tiny;
  }

  .photo__caption {
    @extend %fine-print;
    @extend %centered-text;
    font-style: italic;
  }

Use smaller spacing between image and caption
Use smaller spacing between image and caption
