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

.ma__split-columns {

  &__container {

    @include ma-container;

    @include clearfix;

    .main-content--two & {
      padding-left: 0;
      padding-right: 0;
    }
  }

  &__column {

    @include ma-component-spacing;

    // two items (50/50)

    &:first-child:nth-last-child(2),
    &:first-child:nth-last-child(2) ~ & {
      
      @media ($bp-medium-min) {

        @include span-columns(2 of 4);
        margin-top: 0;
      }
    }

    @media ($bp-x-large-min) {

      &:first-child:nth-last-child(2),
      &:first-child:nth-last-child(2) ~ & {
        margin: 0;
        width: 50%;
      }

      &:first-child:nth-last-child(2) {
        padding-right: ($column + $gutter) /2;
      }

      &:first-child:nth-last-child(2) ~ & {
        padding-left: ($column + $gutter) /2;
      }
    }

    // three columns

    &:first-child:nth-last-child(3),
    &:first-child:nth-last-child(3) ~ & {
      
      @media ($bp-large-min) {

        @include span-columns(2 of 6);
        margin-top: 0;
      }
    }
      
    // two items (50/50) in a 2/3 width

    .main-content--two &:first-child:nth-last-child(2),
    .main-content--two &:first-child:nth-last-child(2) ~ & {

      @media ($bp-large-min) {
        // restack when page-content becomes 2/3

        @include span-columns(12);
      }

      @media ($bp-x-large-min) {

        @include span-columns(2 of 4);
      }
    }
  }
}