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

.layout--three-column {
  // **************************************************
  // MEDIA QUERIES

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

      > .layout__region--first {
        grid-column: var(--layout-three-column-region-first-grid-column);
      }

      > .layout__region--second {
        grid-column: var(--layout-three-column-region-second-grid-column);
      }

      > .layout__region--third {
        grid-column: var(--layout-three-column-region-third-grid-column);
      }
    }

    // **************************************************
    // 33-33-33 SPLIT

    &.layout--33-33-33 {
      --layout-three-column-region-first-grid-column: span 4;
      --layout-three-column-region-second-grid-column: span 4;
      --layout-three-column-region-third-grid-column: span 4;
    }

    // **************************************************
    // 25-50-25 SPLIT

    &.layout--25-50-25 {
      --layout-three-column-region-first-grid-column: 1 / 4;
      --layout-three-column-region-second-grid-column: 4 / 10;
      --layout-three-column-region-third-grid-column: 10 / 13;
    }

    // **************************************************
    // 50-25-25 SPLIT

    &.layout--50-25-25 {
      --layout-three-column-region-first-grid-column: 1 / 7;
      --layout-three-column-region-second-grid-column: 7 / 10;
      --layout-three-column-region-third-grid-column: 10 / 13;
    }

    // **************************************************
    // 25-25-50 SPLIT

    &.layout--25-25-50 {
      --layout-three-column-region-first-grid-column: 1 / 4;
      --layout-three-column-region-second-grid-column: 4 / 7;
      --layout-three-column-region-third-grid-column: 7 / 13;
    }
  }
}
