$bp-section-3up-large-min: "min-width:951px";
$bp-section-3up-large-max: "max-width:950px";

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

.ma__sections-3up {
  
  &__title {

    @include ma-container;
  }

  &__container {

    @include ma-container;

    @include clearfix;
    display: flex;
      align-items: stretch;
      flex-wrap: wrap;
      flex-direction: column;

      @media ($bp-small-min) {
        flex-flow: row wrap;
      }

    & > * {

      @media ($bp-x-small-min) {
        margin-bottom: 20px;
      }

      @media ($bp-small-min) {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: auto;
        margin-bottom: 80px;
      }

      @media ($bp-medium-min) {
        margin-bottom: 80px;
      }

      @media ($bp-small-min) and ($bp-section-3up-large-max) {

        @include span-columns(4 of 8);

        @include omega(2n);
      }
      
      @media ($bp-section-3up-large-min) {
          margin-top: 60px;

          @include span-columns(4 of 12);

          @include omega(3n);
      }
    }
  }
}