/* .cards-grid-v2 {
  position: relative;
  background-color: var(--primary-orange-color);
  isolation: isolate;
  width: 100vw;
  max-width: 1290px;
  margin: 0 auto;

  container-type: inline-size;
  --cols: 15;
  --line: 1px;
  --color: var(--white-color);
  --cap: 0;
  --cell: calc(100cqw / var(--cols));

  @supports not (width: 1cqw) {
    --cell: calc(100vw / var(--cols));
  }

  &:before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;

    background-image:
      linear-gradient(to right, var(--color) 0 var(--line), transparent 0),
      linear-gradient(to bottom, var(--color) 0 var(--line), transparent 0),
      linear-gradient(to bottom, var(--color) 0 var(--line), transparent 0),
      linear-gradient(to bottom, var(--color) 0 var(--line), transparent 0);
    background-repeat: repeat, no-repeat, repeat-y, no-repeat;
    background-size:
      var(--cell) 100%,
      100% calc(var(--cap) * var(--cell)),
      100% var(--cell),
      100% calc(var(--cap) * var(--cell));
    background-position:
      0 0,
      0 0,
      0 calc(var(--cap) * var(--cell)),
      0 calc(100% - calc(var(--cap) * var(--cell)));
  }

  .left,
  .right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    background-color: var(--primary-orange-color);
    container-type: inline-size;

    &:before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background-image:
        linear-gradient(to right, var(--color) 0 var(--line), transparent 0),
        linear-gradient(to bottom, var(--color) 0 var(--line), transparent 0),
        linear-gradient(to bottom, var(--color) 0 var(--line), transparent 0),
        linear-gradient(to bottom, var(--color) 0 var(--line), transparent 0);
      background-repeat: repeat, no-repeat, repeat-y, no-repeat;
      background-size:
        var(--cell) 100%,
        100% calc(var(--cap) * var(--cell)),
        100% var(--cell),
        100% calc(var(--cap) * var(--cell));
      background-position:
        0 0,
        0 0,
        0 calc(var(--cap) * var(--cell)),
        0 calc(100% - calc(var(--cap) * var(--cell)));
    }
  }

  .left { right: 100%; }
  .right { left: 100%; }

  .cards-grid-v2-content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--Spacing-XS);
    padding: var(--Spacing-L) 20px;

    .cards-grid-card {
      background-color: var(--primary-green-color);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 300px;
      padding: var(--Spacing-S);
      gap: var(--Spacing-S);

      .cards-grid-card-icon { width: 80px; height: auto; align-self: end; }
      .cards-grid-card-text { padding: 0 var(--Spacing-S) var(--Spacing-S); }
      .cards-grid-card-title { color: var(--white-color); }

      @media (max-width: 1024px) { min-height: 264px; }
    }

    @media (max-width: 1024px) {
      grid-template-columns: 1fr 1fr !important;
      padding: 48px var(--Spacing-S);
    }
    @media (max-width: 768px) { grid-template-columns: 1fr !important; }
  }

  @media (max-width: 1354px) { width: calc(100vw - 64px); }

  @media (max-width: 1024px) {
    width: calc(100vw - 48px);
    --cols: 8;
    --cap: 0;
  }

  @media (max-width: 768px) {
    width: calc(100vw - 48px);
    --cols: 4;
    --cap: .5;
  }
} */


.cards-grid-v2 {
  position: relative;
  background-color: var(--primary-orange-color);
  isolation: isolate;
  width: 100vw;
  max-width: 1290px;
  margin: 0 auto;

  container-type: inline-size;
  --cols: 15;
  --line: 1px;
  --color: var(--white-color);
  --cap: 0;
  --cell: calc(100cqw / var(--cols));

  @supports not (width: 1cqw) {
    --cell: calc(100vw / var(--cols));
  }

  &:before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
      linear-gradient(to right, var(--color) 0 var(--line), transparent 0),
      linear-gradient(to bottom, var(--color) 0 var(--line), transparent 0),
      linear-gradient(to bottom, var(--color) 0 var(--line), transparent 0),
      linear-gradient(to bottom, var(--color) 0 var(--line), transparent 0);
    background-repeat: repeat, no-repeat, repeat-y, no-repeat;
    background-size:
      var(--cell) 100%,
      100% max(0px, calc(var(--cap) * var(--cell) - var(--line))),
      100% var(--cell),
      100% max(0px, calc(var(--cap) * var(--cell) - var(--line)));
    background-position:
      0 0,
      0 0,
      0 calc(var(--cap) * var(--cell)),
      0 max(0px, calc(100% - calc(var(--cap) * var(--cell)) - var(--line)));
  }

  .left,
  .right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    background-color: var(--primary-orange-color);
    container-type: inline-size;

    &:before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background-image:
        linear-gradient(to right, var(--color) 0 var(--line), transparent 0),
        linear-gradient(to bottom, var(--color) 0 var(--line), transparent 0),
        linear-gradient(to bottom, var(--color) 0 var(--line), transparent 0),
        linear-gradient(to bottom, var(--color) 0 var(--line), transparent 0);
      background-repeat: repeat, no-repeat, repeat-y, no-repeat;
      background-size:
        var(--cell) 100%,
        100% max(0px, calc(var(--cap) * var(--cell) - var(--line))),
        100% var(--cell),
        100% max(0px, calc(var(--cap) * var(--cell) - var(--line)));
      background-position:
        0 0,
        0 0,
        0 calc(var(--cap) * var(--cell)),
        0 max(0px, calc(100% - calc(var(--cap) * var(--cell)) - var(--line)));
    }
  }

  .left { right: 100%; }
  .right { left: 100%; }

  .right .cards {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(4, minmax(0,1fr));
  }

  .cards-grid-v2-content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--Spacing-S);
    padding: var(--Spacing-L) 18px;

    .cards-grid-card {
      background-color: var(--primary-green-color);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 300px;
      padding: var(--Spacing-S);
      gap: var(--Spacing-S);

      .cards-grid-card-icon { width: 80px; height: auto; align-self: end; }
      .cards-grid-card-text { padding: 0 var(--Spacing-S) var(--Spacing-S); }
      .cards-grid-card-title { color: var(--white-color); }

      @media (max-width: 1024px) { min-height: 264px; }
    }

    @media (max-width: 1024px) {
      grid-template-columns: 1fr 1fr !important;
      padding: 48px var(--Spacing-S);
    }

    @media (max-width: 768px) {
      grid-template-columns: 1fr !important;
    }
  }

  @media (max-width: 1354px) {
    width: calc(100vw - 64px);
  }

  @media (max-width: 1024px) {
    width: calc(100vw - 48px);
    --cols: 8;
    --cap: 0;
  }

  @media (max-width: 768px) {
    width: calc(100vw - 48px);
    --cols: 4;
    --cap: .5;
  }
}