_patterns_matrix.scss

@import 'settings';

// List Grid
@mixin vf-p-matrix {
  $matrix-img-width: map-get($icon-sizes, heading-icon--small);
  $matrix-img-gutter: $sph-outer;

  .p-matrix {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin-bottom: $spv-outer--scaleable;
    margin-left: 0;
    padding-left: 0;

    > p:last-child {
      margin-bottom: $spv-nudge-compensation;
    }
  }

  .p-matrix__item {
    border-top: 1px solid $color-mid-light;
    display: flex;
    flex: 1 1 auto;
    padding-bottom: $spv-inner--scaleable;
    padding-top: calc(#{$spv-inner--scaleable} - 1px);

    @media (min-width: $breakpoint-small) {
      display: flex;
      flex-wrap: wrap;
      width: 33.333%;
    }

    @media (min-width: $breakpoint-small) and (max-width: $breakpoint-large) {
      flex-direction: column;
    }

    @media (min-width: $breakpoint-medium) {
      border-right: 1px solid $color-mid-light;
      padding-left: $spv-inner--scaleable;
      padding-right: $spv-inner--scaleable;
      width: 33.333%;

      &:empty {
        display: block; // hide orphans
      }

      &:nth-child(3n + 1) {
        padding-left: 0;
      }

      &:nth-child(3n + 3) {
        border-right: 0;
      }

      &:nth-child(1),
      &:nth-child(2),
      &:nth-child(3) {
        border-top: 0;
      }
    }

    @media (min-width: $breakpoint-large) {
      // 3 items per row
      border-right: 1px solid $color-mid-light;
      width: 33.333%;

      &:empty {
        display: block; // hide orphans
      }

      &:nth-child(3n + 1) {
        padding-left: 0;
      }

      &:nth-child(3n + 3) {
        border-right: 0;
        padding-right: 0;
      }

      &:nth-last-child(1),
      &:nth-last-child(2),
      &:nth-last-child(3) {
        border-bottom: 0;
      }
    }
  }

  .p-matrix__img {
    align-self: flex-start;
    flex-shrink: 0;
    height: auto;
    margin-bottom: $spv-inner--small;
    margin-right: $matrix-img-gutter;
    width: $matrix-img-width;

    @media (max-width: $breakpoint-heading-threshold) {
      margin-top: 0;
    }

    @media (min-width: $breakpoint-heading-threshold) {
      margin-top: -#{map-get($nudges, nudge--h4)};
    }

    @if ($increase-font-size-on-larger-screens) {
      @media (min-width: $breakpoint-x-large) {
        margin-top: -#{map-get($nudges, nudge--h4-large)};
      }
    }
  }

  .p-matrix__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding-right: $sph-inner;

    @media (min-width: $breakpoint-large) {
      width: calc(100% - #{$matrix-img-width + $matrix-img-gutter});
    }
  }

  .p-matrix__title {
    @extend %vf-heading-4;

    @media (min-width: $breakpoint-heading-threshold) {
      margin-bottom: -#{map-get($nudges, nudge--h4)};
    }

    @if ($increase-font-size-on-larger-screens) {
      @media (min-width: $breakpoint-x-large) {
        margin-bottom: -#{map-get($nudges, nudge--h4-large)};
      }
    }
  }

  .p-matrix__desc {
    @media (max-width: $breakpoint-heading-threshold) {
      margin-top: -#{$sp-unit};
    }
  }
}