/*----------------------------------------*\
  MEDIA RESPONSIVE
\*----------------------------------------*/

@media (max-width: $media-collapse) {
  .#{$namespace}media--responsive {
    flex-direction: column;
    align-items: center;

    .#{$namespace}media__left,
    .#{$namespace}media__right {
      flex: 1 1 auto;
    }

    .media__left {
      margin-right: 0;
      margin-bottom: $spacing-unit-default;
    }

    .media__right {
      margin-left: 0;
      margin-top: $spacing-unit-default;
    }


    /**
     * Spacings
     */

    @include foreach-alternative-spacing() {
      &.media--#{$spacing-name} {
        .media__left {
          margin-bottom: $spacing-value;
        }

        .media__right {
          margin-top: $spacing-value;
        }
      }
    }
  }
}

/*----------------------------------------*\
  MEDIA RESPONSIVE
\*----------------------------------------*/

@media (max-width: $media-collapse) {
  .#{$namespace}media--responsive {
    flex-direction: column;
    align-items: flex-start;

    .#{$namespace}media__left,
    .#{$namespace}media__right {
      flex: 1 1 auto;
    }

    .media__left {
      margin-right: 0;
      margin-bottom: $spacing-unit-default;
    }

    .media__right {
      margin-left: 0;
      margin-top: $spacing-unit-default;
    }

    .media__body {
      width: 100%;
    }


    /**
     * Spacings
     */

    @include foreach-alternative-spacing() {
      &.media--#{$spacing-name} {
        .media__left {
          margin-bottom: $spacing-value;
        }

        .media__right {
          margin-top: $spacing-value;
        }
      }
    }
  }
}

Improve alignment of media--responsive elements while stacked
Improve alignment of media--responsive elements while stacked
