:root {
  --grid-columns: 12;
  --grid-gap: clamp(1rem, 2vw, 2rem);
  --grid-bp-sm: 640px;
  --grid-bp-md: 768px;
  --grid-bp-lg: 1024px;
  --grid-bp-xl: 1280px;
  --grid-bp-xxl: 1536px;
  --grid-w-max-width: 190rem;
  --grid-w-width: 80vw;
  --grid-w-min-width: 36vw;
}

@layer grid.base, grid.utilities, grid.responsive, grid.fluid;
@layer grid.base {
  .grid-w {
    width: clamp(var(--grid-w-min-width), var(--grid-w-width), var(--grid-w-max-width));
    margin-inline: auto;
  }
  .grid-r {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns, 12), 1fr);
    gap: var(--grid-gap, clamp(1rem, 2vw, 2rem));
    padding-block-end: var(--grid-gap, clamp(1rem, 2vw, 2rem));
    container-type: inline-size;
    container-name: grid;
  }
  .grid-r > * {
    grid-column-end: span var(--grid-columns, 12);
  }
  .grid-c {
    grid-column-end: span var(--grid-columns, 12);
  }
  .grid-c-1 {
    grid-column-end: span 1;
  }
  .grid-c-2 {
    grid-column-end: span 2;
  }
  .grid-c-3 {
    grid-column-end: span 3;
  }
  .grid-c-4 {
    grid-column-end: span 4;
  }
  .grid-c-5 {
    grid-column-end: span 5;
  }
  .grid-c-6 {
    grid-column-end: span 6;
  }
  .grid-c-7 {
    grid-column-end: span 7;
  }
  .grid-c-8 {
    grid-column-end: span 8;
  }
  .grid-c-9 {
    grid-column-end: span 9;
  }
  .grid-c-10 {
    grid-column-end: span 10;
  }
  .grid-c-11 {
    grid-column-end: span 11;
  }
  .grid-c-12 {
    grid-column-end: span 12;
  }
  .grid-c-start-1 {
    grid-column-start: 1;
  }
  .grid-c-start-2 {
    grid-column-start: 2;
  }
  .grid-c-start-3 {
    grid-column-start: 3;
  }
  .grid-c-start-4 {
    grid-column-start: 4;
  }
  .grid-c-start-5 {
    grid-column-start: 5;
  }
  .grid-c-start-6 {
    grid-column-start: 6;
  }
  .grid-c-start-7 {
    grid-column-start: 7;
  }
  .grid-c-start-8 {
    grid-column-start: 8;
  }
  .grid-c-start-9 {
    grid-column-start: 9;
  }
  .grid-c-start-10 {
    grid-column-start: 10;
  }
  .grid-c-start-11 {
    grid-column-start: 11;
  }
  .grid-c-start-12 {
    grid-column-start: 12;
  }
  .grid-r-subgrid {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1/-1;
  }
  .grid-r-subgrid:not([style*=gap]) {
    gap: inherit;
  }
  .grid-c-subgrid {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1/-1;
  }
  .grid-r .grid-r {
    grid-column: 1/-1;
    padding-block-end: 0;
  }
}
@layer grid.utilities {
  .no-gap {
    gap: 0;
  }
  .place-t-l {
    display: grid;
    align-items: start;
    justify-items: start;
  }
  .place-t-c {
    display: grid;
    align-items: start;
    justify-items: center;
  }
  .place-t-r {
    display: grid;
    align-items: start;
    justify-items: end;
  }
  .place-c-l {
    display: grid;
    align-items: center;
    justify-items: start;
  }
  .place-c-c {
    display: grid;
    align-items: center;
    justify-items: center;
  }
  .place-c-r {
    display: grid;
    align-items: center;
    justify-items: end;
  }
  .place-b-l {
    display: grid;
    align-items: end;
    justify-items: start;
  }
  .place-b-c {
    display: grid;
    align-items: end;
    justify-items: center;
  }
  .place-b-r {
    display: grid;
    align-items: end;
    justify-items: end;
  }
  .justify-start {
    display: flex;
    justify-content: flex-start;
  }
  .justify-end {
    display: flex;
    justify-content: flex-end;
  }
  .justify-center,
  .justify-space-center {
    display: flex;
    justify-content: center;
  }
  .justify-between,
  .justify-space-between {
    display: flex;
    justify-content: space-between;
  }
  .justify-around,
  .justify-space-around {
    display: flex;
    justify-content: space-around;
  }
  .justify-evenly {
    display: flex;
    justify-content: space-evenly;
  }
  .grid-c-min {
    width: min-content;
    grid-column: auto;
  }
  .grid-c-max {
    width: max-content;
    grid-column: auto;
  }
  .grid-c-fit {
    width: fit-content;
    grid-column: auto;
  }
  .hidden {
    display: none;
  }
}
@layer grid.responsive {
  @container grid (min-width: 640px) {
    .grid-c-sm-1 {
      grid-column-end: span 1;
    }
    .grid-c-sm-2 {
      grid-column-end: span 2;
    }
    .grid-c-sm-3 {
      grid-column-end: span 3;
    }
    .grid-c-sm-4 {
      grid-column-end: span 4;
    }
    .grid-c-sm-5 {
      grid-column-end: span 5;
    }
    .grid-c-sm-6 {
      grid-column-end: span 6;
    }
    .grid-c-sm-7 {
      grid-column-end: span 7;
    }
    .grid-c-sm-8 {
      grid-column-end: span 8;
    }
    .grid-c-sm-9 {
      grid-column-end: span 9;
    }
    .grid-c-sm-10 {
      grid-column-end: span 10;
    }
    .grid-c-sm-11 {
      grid-column-end: span 11;
    }
    .grid-c-sm-12 {
      grid-column-end: span 12;
    }
    .grid-c-start-sm-1 {
      grid-column-start: 1;
    }
    .grid-c-start-sm-2 {
      grid-column-start: 2;
    }
    .grid-c-start-sm-3 {
      grid-column-start: 3;
    }
    .grid-c-start-sm-4 {
      grid-column-start: 4;
    }
    .grid-c-start-sm-5 {
      grid-column-start: 5;
    }
    .grid-c-start-sm-6 {
      grid-column-start: 6;
    }
    .grid-c-start-sm-7 {
      grid-column-start: 7;
    }
    .grid-c-start-sm-8 {
      grid-column-start: 8;
    }
    .grid-c-start-sm-9 {
      grid-column-start: 9;
    }
    .grid-c-start-sm-10 {
      grid-column-start: 10;
    }
    .grid-c-start-sm-11 {
      grid-column-start: 11;
    }
    .grid-c-start-sm-12 {
      grid-column-start: 12;
    }
    .hidden-sm {
      display: none;
    }
    .block-sm {
      display: block;
    }
    .grid-sm {
      display: grid;
    }
    .flex-sm {
      display: flex;
    }
  }
  @container grid (min-width: 768px) {
    .grid-c-md-1 {
      grid-column-end: span 1;
    }
    .grid-c-md-2 {
      grid-column-end: span 2;
    }
    .grid-c-md-3 {
      grid-column-end: span 3;
    }
    .grid-c-md-4 {
      grid-column-end: span 4;
    }
    .grid-c-md-5 {
      grid-column-end: span 5;
    }
    .grid-c-md-6 {
      grid-column-end: span 6;
    }
    .grid-c-md-7 {
      grid-column-end: span 7;
    }
    .grid-c-md-8 {
      grid-column-end: span 8;
    }
    .grid-c-md-9 {
      grid-column-end: span 9;
    }
    .grid-c-md-10 {
      grid-column-end: span 10;
    }
    .grid-c-md-11 {
      grid-column-end: span 11;
    }
    .grid-c-md-12 {
      grid-column-end: span 12;
    }
    .grid-c-start-md-1 {
      grid-column-start: 1;
    }
    .grid-c-start-md-2 {
      grid-column-start: 2;
    }
    .grid-c-start-md-3 {
      grid-column-start: 3;
    }
    .grid-c-start-md-4 {
      grid-column-start: 4;
    }
    .grid-c-start-md-5 {
      grid-column-start: 5;
    }
    .grid-c-start-md-6 {
      grid-column-start: 6;
    }
    .grid-c-start-md-7 {
      grid-column-start: 7;
    }
    .grid-c-start-md-8 {
      grid-column-start: 8;
    }
    .grid-c-start-md-9 {
      grid-column-start: 9;
    }
    .grid-c-start-md-10 {
      grid-column-start: 10;
    }
    .grid-c-start-md-11 {
      grid-column-start: 11;
    }
    .grid-c-start-md-12 {
      grid-column-start: 12;
    }
    .hidden-md {
      display: none;
    }
    .block-md {
      display: block;
    }
    .grid-md {
      display: grid;
    }
    .flex-md {
      display: flex;
    }
  }
  @container grid (min-width: 1024px) {
    .grid-c-lg-1 {
      grid-column-end: span 1;
    }
    .grid-c-lg-2 {
      grid-column-end: span 2;
    }
    .grid-c-lg-3 {
      grid-column-end: span 3;
    }
    .grid-c-lg-4 {
      grid-column-end: span 4;
    }
    .grid-c-lg-5 {
      grid-column-end: span 5;
    }
    .grid-c-lg-6 {
      grid-column-end: span 6;
    }
    .grid-c-lg-7 {
      grid-column-end: span 7;
    }
    .grid-c-lg-8 {
      grid-column-end: span 8;
    }
    .grid-c-lg-9 {
      grid-column-end: span 9;
    }
    .grid-c-lg-10 {
      grid-column-end: span 10;
    }
    .grid-c-lg-11 {
      grid-column-end: span 11;
    }
    .grid-c-lg-12 {
      grid-column-end: span 12;
    }
    .grid-c-start-lg-1 {
      grid-column-start: 1;
    }
    .grid-c-start-lg-2 {
      grid-column-start: 2;
    }
    .grid-c-start-lg-3 {
      grid-column-start: 3;
    }
    .grid-c-start-lg-4 {
      grid-column-start: 4;
    }
    .grid-c-start-lg-5 {
      grid-column-start: 5;
    }
    .grid-c-start-lg-6 {
      grid-column-start: 6;
    }
    .grid-c-start-lg-7 {
      grid-column-start: 7;
    }
    .grid-c-start-lg-8 {
      grid-column-start: 8;
    }
    .grid-c-start-lg-9 {
      grid-column-start: 9;
    }
    .grid-c-start-lg-10 {
      grid-column-start: 10;
    }
    .grid-c-start-lg-11 {
      grid-column-start: 11;
    }
    .grid-c-start-lg-12 {
      grid-column-start: 12;
    }
    .hidden-lg {
      display: none;
    }
    .block-lg {
      display: block;
    }
    .grid-lg {
      display: grid;
    }
    .flex-lg {
      display: flex;
    }
  }
  @container grid (min-width: 1280px) {
    .grid-c-xl-1 {
      grid-column-end: span 1;
    }
    .grid-c-xl-2 {
      grid-column-end: span 2;
    }
    .grid-c-xl-3 {
      grid-column-end: span 3;
    }
    .grid-c-xl-4 {
      grid-column-end: span 4;
    }
    .grid-c-xl-5 {
      grid-column-end: span 5;
    }
    .grid-c-xl-6 {
      grid-column-end: span 6;
    }
    .grid-c-xl-7 {
      grid-column-end: span 7;
    }
    .grid-c-xl-8 {
      grid-column-end: span 8;
    }
    .grid-c-xl-9 {
      grid-column-end: span 9;
    }
    .grid-c-xl-10 {
      grid-column-end: span 10;
    }
    .grid-c-xl-11 {
      grid-column-end: span 11;
    }
    .grid-c-xl-12 {
      grid-column-end: span 12;
    }
    .grid-c-start-xl-1 {
      grid-column-start: 1;
    }
    .grid-c-start-xl-2 {
      grid-column-start: 2;
    }
    .grid-c-start-xl-3 {
      grid-column-start: 3;
    }
    .grid-c-start-xl-4 {
      grid-column-start: 4;
    }
    .grid-c-start-xl-5 {
      grid-column-start: 5;
    }
    .grid-c-start-xl-6 {
      grid-column-start: 6;
    }
    .grid-c-start-xl-7 {
      grid-column-start: 7;
    }
    .grid-c-start-xl-8 {
      grid-column-start: 8;
    }
    .grid-c-start-xl-9 {
      grid-column-start: 9;
    }
    .grid-c-start-xl-10 {
      grid-column-start: 10;
    }
    .grid-c-start-xl-11 {
      grid-column-start: 11;
    }
    .grid-c-start-xl-12 {
      grid-column-start: 12;
    }
    .hidden-xl {
      display: none;
    }
    .block-xl {
      display: block;
    }
    .grid-xl {
      display: grid;
    }
    .flex-xl {
      display: flex;
    }
  }
  @container grid (min-width: 1536px) {
    .grid-c-xxl-1 {
      grid-column-end: span 1;
    }
    .grid-c-xxl-2 {
      grid-column-end: span 2;
    }
    .grid-c-xxl-3 {
      grid-column-end: span 3;
    }
    .grid-c-xxl-4 {
      grid-column-end: span 4;
    }
    .grid-c-xxl-5 {
      grid-column-end: span 5;
    }
    .grid-c-xxl-6 {
      grid-column-end: span 6;
    }
    .grid-c-xxl-7 {
      grid-column-end: span 7;
    }
    .grid-c-xxl-8 {
      grid-column-end: span 8;
    }
    .grid-c-xxl-9 {
      grid-column-end: span 9;
    }
    .grid-c-xxl-10 {
      grid-column-end: span 10;
    }
    .grid-c-xxl-11 {
      grid-column-end: span 11;
    }
    .grid-c-xxl-12 {
      grid-column-end: span 12;
    }
    .grid-c-start-xxl-1 {
      grid-column-start: 1;
    }
    .grid-c-start-xxl-2 {
      grid-column-start: 2;
    }
    .grid-c-start-xxl-3 {
      grid-column-start: 3;
    }
    .grid-c-start-xxl-4 {
      grid-column-start: 4;
    }
    .grid-c-start-xxl-5 {
      grid-column-start: 5;
    }
    .grid-c-start-xxl-6 {
      grid-column-start: 6;
    }
    .grid-c-start-xxl-7 {
      grid-column-start: 7;
    }
    .grid-c-start-xxl-8 {
      grid-column-start: 8;
    }
    .grid-c-start-xxl-9 {
      grid-column-start: 9;
    }
    .grid-c-start-xxl-10 {
      grid-column-start: 10;
    }
    .grid-c-start-xxl-11 {
      grid-column-start: 11;
    }
    .grid-c-start-xxl-12 {
      grid-column-start: 12;
    }
    .hidden-xxl {
      display: none;
    }
    .block-xxl {
      display: block;
    }
    .grid-xxl {
      display: grid;
    }
    .flex-xxl {
      display: flex;
    }
  }
  @media (min-width: 640px) {
    .grid-c-vp-sm-1 {
      grid-column-end: span 1;
    }
    .grid-c-vp-sm-2 {
      grid-column-end: span 2;
    }
    .grid-c-vp-sm-3 {
      grid-column-end: span 3;
    }
    .grid-c-vp-sm-4 {
      grid-column-end: span 4;
    }
    .grid-c-vp-sm-5 {
      grid-column-end: span 5;
    }
    .grid-c-vp-sm-6 {
      grid-column-end: span 6;
    }
    .grid-c-vp-sm-7 {
      grid-column-end: span 7;
    }
    .grid-c-vp-sm-8 {
      grid-column-end: span 8;
    }
    .grid-c-vp-sm-9 {
      grid-column-end: span 9;
    }
    .grid-c-vp-sm-10 {
      grid-column-end: span 10;
    }
    .grid-c-vp-sm-11 {
      grid-column-end: span 11;
    }
    .grid-c-vp-sm-12 {
      grid-column-end: span 12;
    }
    .grid-c-start-vp-sm-1 {
      grid-column-start: 1;
    }
    .grid-c-start-vp-sm-2 {
      grid-column-start: 2;
    }
    .grid-c-start-vp-sm-3 {
      grid-column-start: 3;
    }
    .grid-c-start-vp-sm-4 {
      grid-column-start: 4;
    }
    .grid-c-start-vp-sm-5 {
      grid-column-start: 5;
    }
    .grid-c-start-vp-sm-6 {
      grid-column-start: 6;
    }
    .grid-c-start-vp-sm-7 {
      grid-column-start: 7;
    }
    .grid-c-start-vp-sm-8 {
      grid-column-start: 8;
    }
    .grid-c-start-vp-sm-9 {
      grid-column-start: 9;
    }
    .grid-c-start-vp-sm-10 {
      grid-column-start: 10;
    }
    .grid-c-start-vp-sm-11 {
      grid-column-start: 11;
    }
    .grid-c-start-vp-sm-12 {
      grid-column-start: 12;
    }
    .hidden-vp-sm {
      display: none;
    }
    .block-vp-sm {
      display: block;
    }
    .grid-vp-sm {
      display: grid;
    }
    .flex-vp-sm {
      display: flex;
    }
  }
  @media (min-width: 768px) {
    .grid-c-vp-md-1 {
      grid-column-end: span 1;
    }
    .grid-c-vp-md-2 {
      grid-column-end: span 2;
    }
    .grid-c-vp-md-3 {
      grid-column-end: span 3;
    }
    .grid-c-vp-md-4 {
      grid-column-end: span 4;
    }
    .grid-c-vp-md-5 {
      grid-column-end: span 5;
    }
    .grid-c-vp-md-6 {
      grid-column-end: span 6;
    }
    .grid-c-vp-md-7 {
      grid-column-end: span 7;
    }
    .grid-c-vp-md-8 {
      grid-column-end: span 8;
    }
    .grid-c-vp-md-9 {
      grid-column-end: span 9;
    }
    .grid-c-vp-md-10 {
      grid-column-end: span 10;
    }
    .grid-c-vp-md-11 {
      grid-column-end: span 11;
    }
    .grid-c-vp-md-12 {
      grid-column-end: span 12;
    }
    .grid-c-start-vp-md-1 {
      grid-column-start: 1;
    }
    .grid-c-start-vp-md-2 {
      grid-column-start: 2;
    }
    .grid-c-start-vp-md-3 {
      grid-column-start: 3;
    }
    .grid-c-start-vp-md-4 {
      grid-column-start: 4;
    }
    .grid-c-start-vp-md-5 {
      grid-column-start: 5;
    }
    .grid-c-start-vp-md-6 {
      grid-column-start: 6;
    }
    .grid-c-start-vp-md-7 {
      grid-column-start: 7;
    }
    .grid-c-start-vp-md-8 {
      grid-column-start: 8;
    }
    .grid-c-start-vp-md-9 {
      grid-column-start: 9;
    }
    .grid-c-start-vp-md-10 {
      grid-column-start: 10;
    }
    .grid-c-start-vp-md-11 {
      grid-column-start: 11;
    }
    .grid-c-start-vp-md-12 {
      grid-column-start: 12;
    }
    .hidden-vp-md {
      display: none;
    }
    .block-vp-md {
      display: block;
    }
    .grid-vp-md {
      display: grid;
    }
    .flex-vp-md {
      display: flex;
    }
  }
  @media (min-width: 1024px) {
    .grid-c-vp-lg-1 {
      grid-column-end: span 1;
    }
    .grid-c-vp-lg-2 {
      grid-column-end: span 2;
    }
    .grid-c-vp-lg-3 {
      grid-column-end: span 3;
    }
    .grid-c-vp-lg-4 {
      grid-column-end: span 4;
    }
    .grid-c-vp-lg-5 {
      grid-column-end: span 5;
    }
    .grid-c-vp-lg-6 {
      grid-column-end: span 6;
    }
    .grid-c-vp-lg-7 {
      grid-column-end: span 7;
    }
    .grid-c-vp-lg-8 {
      grid-column-end: span 8;
    }
    .grid-c-vp-lg-9 {
      grid-column-end: span 9;
    }
    .grid-c-vp-lg-10 {
      grid-column-end: span 10;
    }
    .grid-c-vp-lg-11 {
      grid-column-end: span 11;
    }
    .grid-c-vp-lg-12 {
      grid-column-end: span 12;
    }
    .grid-c-start-vp-lg-1 {
      grid-column-start: 1;
    }
    .grid-c-start-vp-lg-2 {
      grid-column-start: 2;
    }
    .grid-c-start-vp-lg-3 {
      grid-column-start: 3;
    }
    .grid-c-start-vp-lg-4 {
      grid-column-start: 4;
    }
    .grid-c-start-vp-lg-5 {
      grid-column-start: 5;
    }
    .grid-c-start-vp-lg-6 {
      grid-column-start: 6;
    }
    .grid-c-start-vp-lg-7 {
      grid-column-start: 7;
    }
    .grid-c-start-vp-lg-8 {
      grid-column-start: 8;
    }
    .grid-c-start-vp-lg-9 {
      grid-column-start: 9;
    }
    .grid-c-start-vp-lg-10 {
      grid-column-start: 10;
    }
    .grid-c-start-vp-lg-11 {
      grid-column-start: 11;
    }
    .grid-c-start-vp-lg-12 {
      grid-column-start: 12;
    }
    .hidden-vp-lg {
      display: none;
    }
    .block-vp-lg {
      display: block;
    }
    .grid-vp-lg {
      display: grid;
    }
    .flex-vp-lg {
      display: flex;
    }
  }
  @media (min-width: 1280px) {
    .grid-c-vp-xl-1 {
      grid-column-end: span 1;
    }
    .grid-c-vp-xl-2 {
      grid-column-end: span 2;
    }
    .grid-c-vp-xl-3 {
      grid-column-end: span 3;
    }
    .grid-c-vp-xl-4 {
      grid-column-end: span 4;
    }
    .grid-c-vp-xl-5 {
      grid-column-end: span 5;
    }
    .grid-c-vp-xl-6 {
      grid-column-end: span 6;
    }
    .grid-c-vp-xl-7 {
      grid-column-end: span 7;
    }
    .grid-c-vp-xl-8 {
      grid-column-end: span 8;
    }
    .grid-c-vp-xl-9 {
      grid-column-end: span 9;
    }
    .grid-c-vp-xl-10 {
      grid-column-end: span 10;
    }
    .grid-c-vp-xl-11 {
      grid-column-end: span 11;
    }
    .grid-c-vp-xl-12 {
      grid-column-end: span 12;
    }
    .grid-c-start-vp-xl-1 {
      grid-column-start: 1;
    }
    .grid-c-start-vp-xl-2 {
      grid-column-start: 2;
    }
    .grid-c-start-vp-xl-3 {
      grid-column-start: 3;
    }
    .grid-c-start-vp-xl-4 {
      grid-column-start: 4;
    }
    .grid-c-start-vp-xl-5 {
      grid-column-start: 5;
    }
    .grid-c-start-vp-xl-6 {
      grid-column-start: 6;
    }
    .grid-c-start-vp-xl-7 {
      grid-column-start: 7;
    }
    .grid-c-start-vp-xl-8 {
      grid-column-start: 8;
    }
    .grid-c-start-vp-xl-9 {
      grid-column-start: 9;
    }
    .grid-c-start-vp-xl-10 {
      grid-column-start: 10;
    }
    .grid-c-start-vp-xl-11 {
      grid-column-start: 11;
    }
    .grid-c-start-vp-xl-12 {
      grid-column-start: 12;
    }
    .hidden-vp-xl {
      display: none;
    }
    .block-vp-xl {
      display: block;
    }
    .grid-vp-xl {
      display: grid;
    }
    .flex-vp-xl {
      display: flex;
    }
  }
  @media (min-width: 1536px) {
    .grid-c-vp-xxl-1 {
      grid-column-end: span 1;
    }
    .grid-c-vp-xxl-2 {
      grid-column-end: span 2;
    }
    .grid-c-vp-xxl-3 {
      grid-column-end: span 3;
    }
    .grid-c-vp-xxl-4 {
      grid-column-end: span 4;
    }
    .grid-c-vp-xxl-5 {
      grid-column-end: span 5;
    }
    .grid-c-vp-xxl-6 {
      grid-column-end: span 6;
    }
    .grid-c-vp-xxl-7 {
      grid-column-end: span 7;
    }
    .grid-c-vp-xxl-8 {
      grid-column-end: span 8;
    }
    .grid-c-vp-xxl-9 {
      grid-column-end: span 9;
    }
    .grid-c-vp-xxl-10 {
      grid-column-end: span 10;
    }
    .grid-c-vp-xxl-11 {
      grid-column-end: span 11;
    }
    .grid-c-vp-xxl-12 {
      grid-column-end: span 12;
    }
    .grid-c-start-vp-xxl-1 {
      grid-column-start: 1;
    }
    .grid-c-start-vp-xxl-2 {
      grid-column-start: 2;
    }
    .grid-c-start-vp-xxl-3 {
      grid-column-start: 3;
    }
    .grid-c-start-vp-xxl-4 {
      grid-column-start: 4;
    }
    .grid-c-start-vp-xxl-5 {
      grid-column-start: 5;
    }
    .grid-c-start-vp-xxl-6 {
      grid-column-start: 6;
    }
    .grid-c-start-vp-xxl-7 {
      grid-column-start: 7;
    }
    .grid-c-start-vp-xxl-8 {
      grid-column-start: 8;
    }
    .grid-c-start-vp-xxl-9 {
      grid-column-start: 9;
    }
    .grid-c-start-vp-xxl-10 {
      grid-column-start: 10;
    }
    .grid-c-start-vp-xxl-11 {
      grid-column-start: 11;
    }
    .grid-c-start-vp-xxl-12 {
      grid-column-start: 12;
    }
    .hidden-vp-xxl {
      display: none;
    }
    .block-vp-xxl {
      display: block;
    }
    .grid-vp-xxl {
      display: grid;
    }
    .flex-vp-xxl {
      display: flex;
    }
  }
}
@layer grid.fluid {
  .grid-auto-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-auto-min, 250px), 100%), 1fr));
    gap: var(--grid-gap, clamp(1rem, 2vw, 2rem));
  }
  .grid-auto-fill {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-auto-min, 250px), 100%), 1fr));
    gap: var(--grid-gap, clamp(1rem, 2vw, 2rem));
  }
  .grid-c-auto {
    grid-column: auto;
    width: auto;
  }
  .grid-c-fluid {
    min-width: var(--grid-c-min-width, 200px);
    flex: 1 1 var(--grid-c-min-width, 200px);
  }
  .grid-r-fluid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(50% - var(--grid-gap, clamp(1rem, 2vw, 2rem)) / 2, 100%), 1fr));
    gap: var(--grid-gap, clamp(1rem, 2vw, 2rem));
  }
  .grid-r-fluid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(33.333% - var(--grid-gap, clamp(1rem, 2vw, 2rem)) * 2 / 3, 100%), 1fr));
    gap: var(--grid-gap, clamp(1rem, 2vw, 2rem));
  }
  .grid-r-fluid-4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(25% - var(--grid-gap, clamp(1rem, 2vw, 2rem)) * 3 / 4, 100%), 1fr));
    gap: var(--grid-gap, clamp(1rem, 2vw, 2rem));
  }
  .grid-r-ram {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--col-min, 250px), 1fr));
    gap: var(--grid-gap, clamp(1rem, 2vw, 2rem));
  }
  .grid-r-ram > * {
    grid-column: auto;
  }
  .grid-r-intrinsic {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, max-content));
    gap: var(--grid-gap, clamp(1rem, 2vw, 2rem));
  }
  .grid-r-even {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    gap: var(--grid-gap, clamp(1rem, 2vw, 2rem));
  }
  .grid-r-dense {
    grid-auto-flow: dense;
  }
  .grid-r-flexible {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(var(--col-min, 200px), (100% - var(--grid-gap, clamp(1rem, 2vw, 2rem)) * (var(--col-count, 3) - 1)) / var(--col-count, 3), 1fr), 1fr));
    gap: var(--grid-gap, clamp(1rem, 2vw, 2rem));
  }
}
/*

BASIC GRID:
<div class="grid-w">
  <div class="grid-r">
    <div class="grid-c-12 grid-c-md-6 grid-c-lg-4">Column</div>
    <div class="grid-c-12 grid-c-md-6 grid-c-lg-4">Column</div>
    <div class="grid-c-12 grid-c-md-6 grid-c-lg-4">Column</div>
  </div>
</div>

FLUID GRID (auto-responsive):
<div class="grid-w">
  <div class="grid-auto-fit">
    <div>Card 1</div>
    <div>Card 2</div>
    <div>Card 3</div>
  </div>
</div>

SUBGRID:
<div class="grid-r">
  <div class="grid-c-12 grid-r-subgrid">
    <div class="grid-c-4">Nested 1</div>
    <div class="grid-c-4">Nested 2</div>
    <div class="grid-c-4">Nested 3</div>
  </div>
</div>

NO GAP:
<div class="grid-r no-gap">
  <div class="grid-c-6">No gap</div>
  <div class="grid-c-6">No gap</div>
</div>

PLACEMENT:
<div class="grid-r">
  <div class="grid-c-6 place-c-c">Centered content</div>
</div>

*/