@use '../abstract' as *;

.grid-1-1 {
  display: grid;
  &.is-full-page {
    --p-side-1-color: var(--color-neutral-5);
    --p-side-2-color: var(--color-neutral-0);

    #{$theme-dark} &{
      --p-side-1-color: var(--color-neutral-90);
      --p-side-2-color: var(--color-neutral-105);
    }
    @media #{$break1} {
      grid-template-rows:auto 1fr;
      min-block-size:100vh; min-block-size:100dvh;
      background-color: hsl(var(--p-side-2-color));
      .grid-1-1-col-2 {
        .container {
          $padding-block: pxToRem(0);
          --container-padding-block: #{$padding-block};
        }
      }
      .grid-1-1-col-1 {
        .container {
          $padding-block: pxToRem(16);
          --container-padding-block: #{$padding-block};
        }
      }
    }
    @media #{$break2open} {
      .grid-1-1-col {
        &-1 {
          background-color: hsl(var(--p-side-1-color));
        }
        &-2 {
          background-color: hsl(var(--p-side-2-color));
          > .container {
            block-size:100vh; block-size:100lvh;
          }
        }
      }
    }
  }

  @media #{$break2open} {
    grid-template-columns: repeat(2, 1fr);
    &-col {
      &-1 {

      }
      &-2 {

      }
    }
  }
}