@use "00-base/configure" as *;

.ma__key-actions {
  clear: both;

  .pre-content > & &__container,
  .post-content > & &__container,
  .main-content--full .page-content > & &__container {

    @include ma-container();
  }

  &__items {

    @media ($bp-medium-min) {
      display: flex;
        flex-wrap: wrap;
        align-items: stretch;
      margin-left: -2.43902%;
      margin-bottom: -20px;
    }

    @media ($bp-x-large-min) {
      margin-left: -1.6129%;
    }

    .main-content--two & {

      @media ($bp-medium-min) {
        margin-left: -2.43902%;
      }
    }

  }

  .ma__illustrated-link,
  .ma__callout-link {
    margin-bottom: 20px;
    height: auto;
    width: 100%;

    @media ($bp-medium-max) {

      &:last-child {
        margin-bottom: 0;
      }
    }

    @media ($bp-medium-min) {
      flex-grow: 0;
      flex-shrink: 1;
      flex-basis: auto;
    }

    @media ($bp-medium-min) and ($bp-x-large-max) {
      //@include span-columns(4 of 8);
      margin-left: 2.43902%;
      width: 50% - 2.43902%;
    }

    @media ($bp-x-large-min) {
      //@include span-columns(4 of 12);
      margin-left: 1.6129%;
      width: 33.3333% - 1.6129%;
    }

    .main-content--two & {

      @media ($bp-medium-min) {
        //@include span-columns(4 of 8);
        margin-left: 2.43902%;
        width: 50% - 2.43902%;
      }

      // stacked (two column was too narrow)

      @media ($bp-large-min) and ($bp-x-large-max) {
        width: 100% - 2.43902%;
      }
    }
  }
}