@use '../abstract' as *;
.grid-header {
  gap: pxToRem(24);

  /* mobile */
  @media #{$break1} {
    display:grid; grid-template-columns:auto auto;
    grid-template-areas:  "col-1 col-2"
                          "col-3 col-4";
    &-col {
      &-1 { grid-area:col-1; }
      &-2 { grid-area:col-2; justify-self:end;    }
      &-3 { grid-area:col-3; justify-self:start;  }
      &-4 { grid-area:col-4; justify-self:end;    }
    }
  }
  /* tablet & desktop */
  @media #{$break2}, #{$break3open} {
    display:flex; justify-content:space-between;
  }
}