SU-SWS/decanter

//
// Horizontal Card
//

.su-card--horizontal {
  &:not(.su-card--link),
  &.su-card--link > a {
    // Set up the grid for this variant.
    @include display-grid;
    @include responsive-spacing('padding', 2);

    @each $key, $breakpoint in $su-grid-media {
      @include grid-media($key) {
        @include grid-column-gap(calculate-modular-spacing(1, $key));
      }
    }

    // One column on smallest screen sizes.
    @include grid-media("xs") {
      @include grid-columns(100%);
    }

    // 33/66 for small.
    @include grid-media("sm") {
      @include grid-columns(1fr 2fr);
    }

    // 50/50 side by side on all screen sizes above small.
    @include grid-media("md") {
      @include grid-columns(1fr 1fr);
    }

    img {
      -ms-grid-row: 1;
      -ms-grid-column: 1;
    }

    .su-card__contents {
      @include padding(0);
      -ms-grid-row: 2;
      -ms-grid-column: 1;

      @include grid-media('sm') {
        @include padding(null null null 0);
        -ms-grid-row: 1;
        -ms-grid-column: 2;
      }
    }
  }
}