@use "@s360-base-theme/ui-core/site-config";
@use "@s360-base-theme/ui-core/mq";

.layout--three-column {
  --layout-three-column-regions-gta:
    "lr1"
    "lr2"
    "lr3";

  > .layout__content > .layout__regions {
    grid-template-areas: var(--layout-three-column-regions-gta);

    > .layout__region--first {
      grid-area: lr1;
    }

    > .layout__region--second {
      grid-area: lr2;
    }

    > .layout__region--third {
      grid-area: lr3;
    }
  }

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

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

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

    &.layout--33-33-33 {
      --layout-three-column-regions-gta: "lr1 lr1 lr1 lr1 lr2 lr2 lr2 lr2 lr3 lr3 lr3 lr3"
    }

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

    &.layout--25-50-25 {
      --layout-three-column-regions-gta: "lr1 lr1 lr1 lr2 lr2 lr2 lr2 lr2 lr2 lr3 lr3 lr3"
    }

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

    &.layout--50-25-25 {
      --layout-three-column-regions-gta: "lr1 lr1 lr1 lr1 lr1 lr1 lr2 lr2 lr2 lr3 lr3 lr3"
    }

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

    &.layout--25-25-50 {
      --layout-three-column-regions-gta: "lr1 lr1 lr1 lr2 lr2 lr2 lr3 lr3 lr3 lr3 lr3 lr3"
    }
  }
}
