@use "core/site-config";
@use "core/mq";
@use "s360-toolkit";

.layout--two-column {
  > .layout__regions {
    display: grid;
    row-gap: site-config.$row-gap;
    column-gap: site-config.$column-gap;
  }

  /// **************************************************
  /// MEDIA QUERIES

  @media (min-width: mq.$mq-1024) {
    > .layout__regions {
      grid-template-columns: repeat(site-config.$grid-columns, minmax(0, 1fr));
    }

    &.layout--50-50 {
      > .layout__regions {
        > .layout__region {
          grid-column: span 6;
        }
      }
    }

    /// **************************************************
    /// 60-40 / 40-60 SPLITS

    &.layout--60-40 {
      > .layout__regions {
        > .layout__region--first {
          grid-column: span 7;
        }

        > .layout__region--second {
          grid-column: span 5;
        }
      }
    }

    &.layout--40-60 {
      > .layout__regions {
        > .layout__region--first {
          grid-column: span 5;
        }

        > .layout__region--second {
          grid-column: span 7;
        }
      }
    }

    /// **************************************************
    /// 70-30 / 30-70 SPLITS

    &.layout--70-30 {
      > .layout__regions {
        > .layout__region--first {
          grid-column: span 8;
        }

        > .layout__region--second {
          grid-column: span 4;
        }
      }
    }

    &.layout--30-70 {
      > .layout__regions {
        > .layout__region--first {
          grid-column: span 4;
        }

        > .layout__region--second {
          grid-column: span 8;
        }
      }
    }

    /// **************************************************
    /// 75-25 / 25-75 SPLITS

    &.layout--75-25 {
      > .layout__regions {
        > .layout__region--first {
          grid-column: span 9;
        }

        > .layout__region--second {
          grid-column: span 3;
        }
      }
    }

    &.layout--25-75 {
      > .layout__regions {
        > .layout__region--first {
          grid-column: span 3;
        }

        > .layout__region--second {
          grid-column: span 9;
        }
      }
    }
  }
}
