/////////////////////////
// THEME / OBJECTS / GRID
/////////////////////////


@use "../variables/" as var;
@use "../mixins/" as mixins;

@supports (display:grid) {


  .unl-grid-cols {
    grid-template-columns: #{var.$ms12}vw #{var.$ms08}rem 1rem 1fr 1fr #{var.$ms12}vw;
    // 5.62vw 3.16rem 1rem 1fr 1fr 5.62vw
  }


  @include mixins.mq(sm) {

    .unl-grid-cols {
      grid-template-columns: #{var.$ms12}vw #{var.$ms08}rem 1rem 1fr 1fr #{var.$ms08}vw #{var.$ms08}rem 1rem 1fr 1fr #{var.$ms12}vw;
      // 5.62vw 3.16rem 1rem 1fr 1fr 3.16vw 3.16rem 1rem 1fr 1fr 5.62vw
    }

  }

  @include mixins.mq(lg) {

    .unl-grid-cols {
      grid-template-columns: #{var.$ms12}vw #{var.$ms08}rem 1rem 2fr 1fr #{var.$ms08}rem 1rem #{var.$ms08}vw #{var.$ms08}rem 1rem 1fr 2fr #{var.$ms08}rem 1rem #{var.$ms12}vw;
      // 5.62vw 3.16rem 1rem 2fr 1fr 3.16rem 1rem 3.16vw 3.16rem 1rem 1fr 2fr 3.16rem 1rem 5.62vw
    }

  }


  .unl-offset-grid {
    display: grid;
    grid-column-gap: var.$length-em-4;
    grid-template-columns: var.$length-em-8 1fr;
  }

}