#styleguide {
  .mock-content {
    display: flex;
    min-height: 250px;
    height: 100%;

    .mock-image,
    .mock-copy {
      min-height: 100%;
      width: 100%;
      margin: 1em;
    }

    .mock-image {
      background: linear-gradient(
          to top right,
          transparent 0%,
          transparent 49%,
          $grey-blue 49%,
          $grey-blue 51%,
          transparent 51%,
          transparent 100%
        ),
        linear-gradient(
          to bottom right,
          transparent 0%,
          transparent 49%,
          $grey-blue 49%,
          $grey-blue 51%,
          transparent 51%,
          transparent 100%
        );
    }

    .mock-copy {
      background: repeating-linear-gradient(
        to bottom,
        $grey-blue,
        $grey-blue 5px,
        transparent 5px,
        transparent 14px
      );
    }

    .mock-vague {
      background: lighten($grey-blue, 15%);
      width: 100%;
      height: 100%;
    }
  }

  .mock-spacing {
    padding: 2em;
  }
}