@import url("variables.css");


html {
  scroll-behavior: smooth;
}

.cnt {
  width: calc(100% - 2 * var(--layout--grid--margin));
  max-width: var(--layout--grid--width);
  margin-right: auto;
  margin-left: auto;
}
[class*="rw"] {
  display: flex;
  flex-wrap: wrap;
  margin-right: calc(-1 * calc(var(--layout--grid--gutter) / 2));
  margin-left: calc(-1 * calc(var(--layout--grid--gutter) / 2));
  grid-row-gap: var(--layout--grid--row);
}
[class*="clm"] {
  padding-right: calc(var(--layout--grid--gutter) / 2);
  padding-left: calc(var(--layout--grid--gutter) / 2);
  flex-basis: 100%;
  flex-grow: 1;
  max-width: 100%;
}
[class*="clm"][class*="xs_o1"] {
  order: 1;
}
[class*="clm"][class*="xs_o2"] {
  order: 2;
}
[class*="clm"][class*="xs_o3"] {
  order: 3;
}
[class*="clm"][class*="xs_o4"] {
  order: 4;
}
[class*="clm"][class*="xs_1"] {
  flex-basis: 8.33%;
  max-width: 8.33%;
  flex-grow: 1;
  flex-shrink: 1;
}
[class*="clm"][class*="xs_2"] {
  flex-basis: 16.666%;
  max-width: 16.666%;
  flex-grow: 1;
  flex-shrink: 1;
}
[class*="clm"][class*="xs_3"] {
  flex-basis: 25%;
  max-width: 25%;
  flex-grow: 1;
  flex-shrink: 1;
}
[class*="clm"][class*="xs_4"] {
  flex-basis: 33.333%;
  max-width: 33.333%;
  flex-grow: 1;
  flex-shrink: 1;
}
[class*="clm"][class*="xs_5"] {
  flex-basis: 41.666%;
  max-width: 41.666%;
  flex-grow: 1;
  flex-shrink: 1;
}
[class*="clm"][class*="xs_6"] {
  flex-basis: 50%;
  max-width: 50%;
  flex-grow: 1;
  flex-shrink: 1;
}
[class*="clm"][class*="xs_7"] {
  flex-basis: 58.333%;
  max-width: 58.333%;
  flex-grow: 1;
  flex-shrink: 1;
}
[class*="clm"][class*="xs_8"] {
  flex-basis: 66.666%;
  max-width: 66.666%;
  flex-grow: 1;
  flex-shrink: 1;
}
[class*="clm"][class*="xs_9"] {
  flex-basis: 75%;
  max-width: 75%;
  flex-grow: 1;
  flex-shrink: 1;
}
[class*="clm"][class*="xs_10"] {
  flex-basis: 83.3333%;
  max-width: 83.3333%;
  flex-grow: 1;
  flex-shrink: 1;
}
[class*="clm"][class*="xs_11"] {
  flex-basis: 91.67%;
  max-width: 91.67%;
  flex-grow: 1;
  flex-shrink: 1;
}
[class*="clm"][class*="xs_12"] {
  flex-basis: 100%;
  max-width: 100%;
  flex-grow: 1;
  flex-shrink: 1;
}
@media (min-width: 480px) {
  [class*="clm"][class*="sm_o1"] {
    order: 1;
  }
  [class*="clm"][class*="sm_o2"] {
    order: 2;
  }
  [class*="clm"][class*="sm_o3"] {
    order: 3;
  }
  [class*="clm"][class*="sm_o4"] {
    order: 4;
  }
  [class*="clm"][class*="sm_1"] {
    flex-basis: 8.33%;
    max-width: 8.33%;
    flex-grow: 1;
    flex-shrink: 1;
  }
  [class*="clm"][class*="sm_2"] {
    flex-basis: 16.666%;
    max-width: 16.666%;
    flex-grow: 1;
    flex-shrink: 1;
  }
  [class*="clm"][class*="sm_3"] {
    flex-basis: 25%;
    max-width: 25%;
    flex-grow: 1;
    flex-shrink: 1;
  }
  [class*="clm"][class*="sm_4"] {
    flex-basis: 33.333%;
    max-width: 33.333%;
    flex-grow: 1;
    flex-shrink: 1;
  }
  [class*="clm"][class*="sm_5"] {
    flex-basis: 41.666%;
    max-width: 41.666%;
    flex-grow: 1;
    flex-shrink: 1;
  }
  [class*="clm"][class*="sm_6"] {
    flex-basis: 50%;
    max-width: 50%;
    flex-grow: 1;
    flex-shrink: 1;
  }
  [class*="clm"][class*="sm_7"] {
    flex-basis: 58.333%;
    max-width: 58.333%;
    flex-grow: 1;
    flex-shrink: 1;
  }
  [class*="clm"][class*="sm_8"] {
    flex-basis: 66.666%;
    max-width: 66.666%;
    flex-grow: 1;
    flex-shrink: 1;
  }
  [class*="clm"][class*="sm_9"] {
    flex-basis: 75%;
    max-width: 75%;
    flex-grow: 1;
    flex-shrink: 1;
  }
  [class*="clm"][class*="sm_10"] {
    flex-basis: 83.3333%;
    max-width: 83.3333%;
    flex-grow: 1;
    flex-shrink: 1;
  }
  [class*="clm"][class*="sm_11"] {
    flex-basis: 91.67%;
    max-width: 91.67%;
    flex-grow: 1;
    flex-shrink: 1;
  }
  [class*="clm"][class*="sm_12"] {
    flex-basis: 100%;
    max-width: 100%;
    flex-grow: 1;
    flex-shrink: 1;
  }
}
@media (min-width: 768px) {
  [class*="clm"][class*="md_o1"] {
    order: 1;
  }
  [class*="clm"][class*="md_o2"] {
    order: 2;
  }
  [class*="clm"][class*="md_o3"] {
    order: 3;
  }
  [class*="clm"][class*="md_o4"] {
    order: 4;
  }
  [class*="clm"][class*="md_1"] {
    flex-basis: 8.33%;
    max-width: 8.33%;
    flex-grow: 1;
    flex-shrink: 1;
  }
  [class*="clm"][class*="md_2"] {
    flex-basis: 16.666%;
    max-width: 16.666%;
    flex-grow: 1;
    flex-shrink: 1;
  }
  [class*="clm"][class*="md_3"] {
    flex-basis: 25%;
    max-width: 25%;
    flex-grow: 1;
    flex-shrink: 1;
  }
  [class*="clm"][class*="md_4"] {
    flex-basis: 33.333%;
    max-width: 33.333%;
    flex-grow: 1;
    flex-shrink: 1;
  }
  [class*="clm"][class*="md_5"] {
    flex-basis: 41.666%;
    max-width: 41.666%;
    flex-grow: 1;
    flex-shrink: 1;
  }
  [class*="clm"][class*="md_6"] {
    flex-basis: 50%;
    max-width: 50%;
    flex-grow: 1;
    flex-shrink: 1;
  }
  [class*="clm"][class*="md_7"] {
    flex-basis: 58.333%;
    max-width: 58.333%;
    flex-grow: 1;
    flex-shrink: 1;
  }
  [class*="clm"][class*="md_8"] {
    flex-basis: 66.666%;
    max-width: 66.666%;
    flex-grow: 1;
    flex-shrink: 1;
  }
  [class*="clm"][class*="md_9"] {
    flex-basis: 75%;
    max-width: 75%;
    flex-grow: 1;
    flex-shrink: 1;
  }
  [class*="clm"][class*="md_10"] {
    flex-basis: 83.3333%;
    max-width: 83.3333%;
    flex-grow: 1;
    flex-shrink: 1;
  }
  [class*="clm"][class*="md_11"] {
    flex-basis: 91.67%;
    max-width: 91.67%;
    flex-grow: 1;
    flex-shrink: 1;
  }
  [class*="clm"][class*="md_12"] {
    flex-basis: 100%;
    max-width: 100%;
    flex-grow: 1;
    flex-shrink: 1;
  }
}
@media (min-width: 992px) {
  [class*="clm"][class*="lg_o1"] {
    order: 1;
  }
  [class*="clm"][class*="lg_o2"] {
    order: 2;
  }
  [class*="clm"][class*="lg_o3"] {
    order: 3;
  }
  [class*="clm"][class*="lg_o4"] {
    order: 4;
  }
  [class*="clm"][class*="lg_1"] {
    flex-basis: 8.33%;
    max-width: 8.33%;
    flex-grow: 1;
    flex-shrink: 1;
  }
  [class*="clm"][class*="lg_2"] {
    flex-basis: 16.666%;
    max-width: 16.666%;
    flex-grow: 1;
    flex-shrink: 1;
  }
  [class*="clm"][class*="lg_3"] {
    flex-basis: 25%;
    max-width: 25%;
    flex-grow: 1;
    flex-shrink: 1;
  }
  [class*="clm"][class*="lg_4"] {
    flex-basis: 33.333%;
    max-width: 33.333%;
    flex-grow: 1;
    flex-shrink: 1;
  }
  [class*="clm"][class*="lg_5"] {
    flex-basis: 41.666%;
    max-width: 41.666%;
    flex-grow: 1;
    flex-shrink: 1;
  }
  [class*="clm"][class*="lg_6"] {
    flex-basis: 50%;
    max-width: 50%;
    flex-grow: 1;
    flex-shrink: 1;
  }
  [class*="clm"][class*="lg_7"] {
    flex-basis: 58.333%;
    max-width: 58.333%;
    flex-grow: 1;
    flex-shrink: 1;
  }
  [class*="clm"][class*="lg_8"] {
    flex-basis: 66.666%;
    max-width: 66.666%;
    flex-grow: 1;
    flex-shrink: 1;
  }
  [class*="clm"][class*="lg_9"] {
    flex-basis: 75%;
    max-width: 75%;
    flex-grow: 1;
    flex-shrink: 1;
  }
  [class*="clm"][class*="lg_10"] {
    flex-basis: 83.3333%;
    max-width: 83.3333%;
    flex-grow: 1;
    flex-shrink: 1;
  }
  [class*="clm"][class*="lg_11"] {
    flex-basis: 91.67%;
    max-width: 91.67%;
    flex-grow: 1;
    flex-shrink: 1;
  }
  [class*="clm"][class*="lg_12"] {
    flex-basis: 100%;
    max-width: 100%;
    flex-grow: 1;
    flex-shrink: 1;
  }
}
[class*="clm"][class*="fx_1"] {
  flex-basis: calc(
    (var(--layout--grid--width) * 0.0833) + 1 *
      (var(--layout--grid--gutter) / 12)
  );
  width: 100%;
  max-width: calc(
    (var(--layout--grid--width) * 0.0833) + 1 *
      (var(--layout--grid--gutter) / 12)
  );
  flex-grow: 1;
  flex-shrink: 1;
}
[class*="clm"][class*="fx_2"] {
  flex-basis: calc(
    (var(--layout--grid--width) * 0.1666) + 2 *
      (var(--layout--grid--gutter) / 12)
  );
  width: 100%;
  max-width: calc(
    (var(--layout--grid--width) * 0.1666) + 2 *
      (var(--layout--grid--gutter) / 12)
  );
  flex-grow: 1;
  flex-shrink: 1;
}
[class*="clm"][class*="fx_3"] {
  flex-basis: calc(
    (var(--layout--grid--width) * 0.25) + 3 * (var(--layout--grid--gutter) / 12)
  );
  width: 100%;
  max-width: calc(
    (var(--layout--grid--width) * 0.25) + 3 * (var(--layout--grid--gutter) / 12)
  );
  flex-grow: 1;
  flex-shrink: 1;
}
[class*="clm"][class*="fx_4"] {
  flex-basis: calc(
    (var(--layout--grid--width) * 0.3333) + 4 *
      (var(--layout--grid--gutter) / 12)
  );
  width: 100%;
  max-width: calc(
    (var(--layout--grid--width) * 0.3333) + 4 *
      (var(--layout--grid--gutter) / 12)
  );
  flex-grow: 1;
  flex-shrink: 1;
}
[class*="clm"][class*="fx_5"] {
  flex-basis: calc(
    (var(--layout--grid--width) * 0.4166) + 5 *
      (var(--layout--grid--gutter) / 12)
  );
  width: 100%;
  max-width: calc(
    (var(--layout--grid--width) * 0.4166) + 5 *
      (var(--layout--grid--gutter) / 12)
  );
  flex-grow: 1;
  flex-shrink: 1;
}
[class*="clm"][class*="fx_6"] {
  flex-basis: calc(
    (var(--layout--grid--width) * 0.5) + 6 * (var(--layout--grid--gutter) / 12)
  );
  width: 100%;
  max-width: calc(
    (var(--layout--grid--width) * 0.5) + 6 * (var(--layout--grid--gutter) / 12)
  );
  flex-grow: 1;
  flex-shrink: 1;
}
[class*="clm"][class*="fx_7"] {
  flex-basis: calc(
    (var(--layout--grid--width) * 0.5833) + 7 *
      (var(--layout--grid--gutter) / 12)
  );
  width: 100%;
  max-width: calc(
    (var(--layout--grid--width) * 0.5833) + 7 *
      (var(--layout--grid--gutter) / 12)
  );
  flex-grow: 1;
  flex-shrink: 1;
}
[class*="clm"][class*="fx_8"] {
  flex-basis: calc(
    (var(--layout--grid--width) * 0.6666) + 8 *
      (var(--layout--grid--gutter) / 12)
  );
  width: 100%;
  max-width: calc(
    (var(--layout--grid--width) * 0.6666) + 8 *
      (var(--layout--grid--gutter) / 12)
  );
  flex-grow: 1;
  flex-shrink: 1;
}
[class*="clm"][class*="fx_9"] {
  flex-basis: calc(
    (var(--layout--grid--width) * 0.75) + 9 * (var(--layout--grid--gutter) / 12)
  );
  width: 100%;
  max-width: calc(
    (var(--layout--grid--width) * 0.75) + 9 * (var(--layout--grid--gutter) / 12)
  );
  flex-grow: 1;
  flex-shrink: 1;
}
[class*="clm"][class*="fx_10"] {
  flex-basis: calc(
    (var(--layout--grid--width) * 0.8333) + 10 *
      (var(--layout--grid--gutter) / 12)
  );
  width: 100%;
  max-width: calc(
    (var(--layout--grid--width) * 0.8333) + 10 *
      (var(--layout--grid--gutter) / 12)
  );
  flex-grow: 1;
  flex-shrink: 1;
}
[class*="clm"][class*="fx_11"] {
  flex-basis: calc(
    (var(--layout--grid--width) * 0.9166) + 11 *
      (var(--layout--grid--gutter) / 12)
  );
  width: 100%;
  max-width: calc(
    (var(--layout--grid--width) * 0.9166) + 11 *
      (var(--layout--grid--gutter) / 12)
  );
  flex-grow: 1;
  flex-shrink: 1;
}
[class*="clm"][class*="fx_12"] {
  flex-basis: calc(
    (var(--layout--grid--width) * 1) + 12 * (var(--layout--grid--gutter) / 12)
  );
  width: 100%;
  max-width: calc(
    (var(--layout--grid--width) * 1) + 12 * (var(--layout--grid--gutter) / 12)
  );
  flex-grow: 1;
  flex-shrink: 1;
}
[class*="mw_1"] {
  width: 100%;
  max-width: calc(
    (var(--layout--grid--width) * 0.0833) - 11 *
      (var(--layout--grid--gutter) / 12)
  );
}
[class*="mw_2"] {
  width: 100%;
  max-width: calc(
    (var(--layout--grid--width) * 0.1666) - 10 *
      (var(--layout--grid--gutter) / 12)
  );
}
[class*="mw_3"] {
  width: 100%;
  max-width: calc(
    (var(--layout--grid--width) * 0.25) - 9 * (var(--layout--grid--gutter) / 12)
  );
}
[class*="mw_4"] {
  width: 100%;
  max-width: calc(
    (var(--layout--grid--width) * 0.3333) - 8 *
      (var(--layout--grid--gutter) / 12)
  );
}
[class*="mw_5"] {
  width: 100%;
  max-width: calc(
    (var(--layout--grid--width) * 0.4166) - 7 *
      (var(--layout--grid--gutter) / 12)
  );
}
[class*="mw_6"] {
  width: 100%;
  max-width: calc(
    (var(--layout--grid--width) * 0.5) - 6 * (var(--layout--grid--gutter) / 12)
  );
}
[class*="mw_7"] {
  width: 100%;
  max-width: calc(
    (var(--layout--grid--width) * 0.5833) - 5 *
      (var(--layout--grid--gutter) / 12)
  );
}
[class*="mw_8"] {
  width: 100%;
  max-width: calc(
    (var(--layout--grid--width) * 0.6666) - 4 *
      (var(--layout--grid--gutter) / 12)
  );
}
[class*="mw_9"] {
  width: 100%;
  max-width: calc(
    (var(--layout--grid--width) * 0.75) - 3 * (var(--layout--grid--gutter) / 12)
  );
}
[class*="mw_10"] {
  width: 100%;
  max-width: calc(
    (var(--layout--grid--width) * 0.8333) - 2 *
      (var(--layout--grid--gutter) / 12)
  );
}
[class*="mw_11"] {
  width: 100%;
  max-width: calc(
    (var(--layout--grid--width) * 0.9166) - 1 *
      (var(--layout--grid--gutter) / 12)
  );
}
[class*="mw_12"] {
  width: 100%;
  max-width: var(--layout--grid--width);
}
/*------------------------------------------ flex classes -----------------------------*/
[class*="xs_fd0"] {
  flex-direction: column;
  display: flex;
}
[class*="xs_fd1"] {
  flex-direction: row;
  display: flex;
}
[class*="xs_fd2"] {
  flex-direction: column-reverse;
  display: flex;
}
[class*="xs_fd3"] {
  flex-direction: row-reverse;
  display: flex;
}
[class*="xs_fj0"] {
  justify-content: start;
  display: flex;
}
[class*="xs_fj1"] {
  justify-content: center;
  display: flex;
}
[class*="xs_fj2"] {
  justify-content: end;
  display: flex;
}
[class*="xs_fj3"] {
  justify-content: space-between;
  display: flex;
}
[class*="xs_fj4"] {
  justify-content: space-around;
  display: flex;
}
[class*="xs_fa0"] {
  align-items: start;
  display: flex;
}
[class*="xs_fa1"] {
  align-items: center;
  display: flex;
}
[class*="xs_fa2"] {
  align-items: end;
  display: flex;
}
[class*="xs_fa3"] {
  align-items: stretch;
  display: flex;
}
[class*="xs_fa4"] {
  align-items: baseline;
  display: flex;
}
[class*="xs_fw0"] {
  flex-wrap: nowrap;
  display: flex;
}
[class*="xs_fw1"] {
  flex-wrap: wrap;
  display: flex;
}
[class*="xs_fw2"] {
  flex-wrap: wrap-reverse;
  display: flex;
}
@media (min-width: 480px) {
  [class*="sm_fd0"] {
    flex-direction: column;
    display: flex;
  }
  [class*="sm_fd1"] {
    flex-direction: row;
    display: flex;
  }
  [class*="sm_fd2"] {
    flex-direction: column-reverse;
    display: flex;
  }
  [class*="sm_fd3"] {
    flex-direction: row-reverse;
    display: flex;
  }
  [class*="sm_fj0"] {
    justify-content: start;
    display: flex;
  }
  [class*="sm_fj1"] {
    justify-content: center;
    display: flex;
  }
  [class*="sm_fj2"] {
    justify-content: end;
    display: flex;
  }
  [class*="sm_fj3"] {
    justify-content: space-between;
    display: flex;
  }
  [class*="sm_fj4"] {
    justify-content: space-around;
    display: flex;
  }
  [class*="sm_fa0"] {
    align-items: start;
    display: flex;
  }
  [class*="sm_fa1"] {
    align-items: center;
    display: flex;
  }
  [class*="sm_fa2"] {
    align-items: end;
    display: flex;
  }
  [class*="sm_fa3"] {
    align-items: stretch;
    display: flex;
  }
  [class*="sm_fa4"] {
    align-items: baseline;
    display: flex;
  }
  [class*="sm_fw0"] {
    flex-wrap: nowrap;
    display: flex;
  }
  [class*="sm_fw1"] {
    flex-wrap: wrap;
    display: flex;
  }
  [class*="sm_fw2"] {
    flex-wrap: wrap-reverse;
    display: flex;
  }
}
@media (min-width: 768px) {
  [class*="md_fd0"] {
    flex-direction: column;
    display: flex;
  }
  [class*="md_fd1"] {
    flex-direction: row;
    display: flex;
  }
  [class*="md_fd2"] {
    flex-direction: column-reverse;
    display: flex;
  }
  [class*="md_fd3"] {
    flex-direction: row-reverse;
    display: flex;
  }
  [class*="md_fj0"] {
    justify-content: start;
    display: flex;
  }
  [class*="md_fj1"] {
    justify-content: center;
    display: flex;
  }
  [class*="md_fj2"] {
    justify-content: end;
    display: flex;
  }
  [class*="md_fj3"] {
    justify-content: space-between;
    display: flex;
  }
  [class*="md_fj4"] {
    justify-content: space-around;
    display: flex;
  }
  [class*="md_fa0"] {
    align-items: start;
    display: flex;
  }
  [class*="md_fa1"] {
    align-items: center;
    display: flex;
  }
  [class*="md_fa2"] {
    align-items: end;
    display: flex;
  }
  [class*="md_fa3"] {
    align-items: stretch;
    display: flex;
  }
  [class*="md_fa4"] {
    align-items: baseline;
    display: flex;
  }
  [class*="md_fw0"] {
    flex-wrap: nowrap;
    display: flex;
  }
  [class*="md_fw1"] {
    flex-wrap: wrap;
    display: flex;
  }
  [class*="md_fw2"] {
    flex-wrap: wrap-reverse;
    display: flex;
  }
  [class*="md_fac0"] {
    align-content: flex-start;
    display: flex;
  }
}
@media (min-width: 992px) {
  [class*="lg_fd0"] {
    flex-direction: column;
    display: flex;
  }
  [class*="lg_fd1"] {
    flex-direction: row;
    display: flex;
  }
  [class*="lg_fd2"] {
    flex-direction: column-reverse;
    display: flex;
  }
  [class*="lg_fd3"] {
    flex-direction: row-reverse;
    display: flex;
  }
  [class*="lg_fj0"] {
    justify-content: start;
    display: flex;
  }
  [class*="lg_fj1"] {
    justify-content: center;
    display: flex;
  }
  [class*="lg_fj2"] {
    justify-content: end;
    display: flex;
  }
  [class*="lg_fj3"] {
    justify-content: space-between;
    display: flex;
  }
  [class*="lg_fj4"] {
    justify-content: space-around;
    display: flex;
  }
  [class*="lg_fa0"] {
    align-items: start;
    display: flex;
  }
  [class*="lg_fa1"] {
    align-items: center;
    display: flex;
  }
  [class*="lg_fa2"] {
    align-items: end;
    display: flex;
  }
  [class*="lg_fa3"] {
    align-items: stretch;
    display: flex;
  }
  [class*="lg_fa4"] {
    align-items: baseline;
    display: flex;
  }
  [class*="lg_fw0"] {
    flex-wrap: nowrap;
    display: flex;
  }
  [class*="lg_fw1"] {
    flex-wrap: wrap;
    display: flex;
  }
  [class*="lg_fw2"] {
    flex-wrap: wrap-reverse;
    display: flex;
  }
  [class*="lg_fac0"] {
    align-content: flex-start;
    display: flex;
  }
}
/*------------------------------------------ text alignment classes -----------------------------*/
[class*="xs_ta0"] {
  text-align: left;
}
[class*="xs_ta1"] {
  text-align: center;
}
[class*="xs_ta2"] {
  text-align: right;
}
@media (min-width: 480px) {
  [class*="sm_ta0"] {
    text-align: left;
  }
  [class*="sm_ta1"] {
    text-align: center;
  }
  [class*="sm_ta2"] {
    text-align: right;
  }
}
@media (min-width: 768px) {
  [class*="md_ta0"] {
    text-align: left;
  }
  [class*="md_ta1"] {
    text-align: center;
  }
  [class*="md_ta2"] {
    text-align: right;
  }
}
@media (min-width: 992px) {
  [class*="lg_ta0"] {
    text-align: left;
  }
  [class*="lg_ta1"] {
    text-align: center;
  }
  [class*="lg_ta2"] {
    text-align: right;
  }
}

/* 
Custom horizontal gap for columns inside rw (row) 
Set the value to be equal to the size value and add that class as combo class of the rw you want to have the custom horizontal gap.
example:
[class*=rw][class*=hg5] {
  --layout--grid--gutter: var(--size--5);
}
now you just need to add the hg5 class to the rw (row)
*/
[class*=rw][class*=hg/*value*/] {
  --layout--grid--gutter: var(--layout--size-- /*value*/);
}
/* 
Custom vertical gap for columns inside row (rw) 
Set the value to be equal to the size value and add that class as combo class of the rw you want to have the custom vertical gap.
example:
[class*=rw][class*=vg5] {
  --layout--grid--gap: var(--size--5);
}
now you just need to add the vg5 class to the rw (row)
*/
[class*=rw][class*=vg/*value*/] {
  --layout--grid--row: var(--layout--size-- /*value*/);
}
/*
flex gap classes -----------------------------*/
[class*="fg0"] {
  grid-column-gap: var(--layout--size--0);
  grid-row-gap: var(--layout--size--0);
  display: flex;
}
[class*="fg1"] {
  grid-column-gap: var(--layout--size--1);
  grid-row-gap: var(--layout--size--1);
  display: flex;
}
[class*="fg2"] {
  grid-column-gap: var(--layout--size--2);
  grid-row-gap: var(--layout--size--2);
  display: flex;
}
[class*="fg3"] {
  grid-column-gap: var(--layout--size--3);
  grid-row-gap: var(--layout--size--3);
  display: flex;
}
[class*="fg4"] {
  grid-column-gap: var(--layout--size--4);
  grid-row-gap: var(--layout--size--4);
  display: flex;
}
[class*="fg5"] {
  grid-column-gap: var(--layout--size--5);
  grid-row-gap: var(--layout--size--5);
  display: flex;
}
[class*="fg6"] {
  grid-column-gap: var(--layout--size--6);
  grid-row-gap: var(--layout--size--6);
  display: flex;
}
[class*="fg7"] {
  grid-column-gap: var(--layout--size--7);
  grid-row-gap: var(--layout--size--7);
  display: flex;
}
[class*="fg8"] {
  grid-column-gap: var(--layout--size--8);
  grid-row-gap: var(--layout--size--8);
  display: flex;
}
[class*="fg9"] {
  grid-column-gap: var(--layout--size--9);
  grid-row-gap: var(--layout--size--9);
  display: flex;
}
[class*="fg10"] {
  grid-column-gap: var(--layout--size--10);
  grid-row-gap: var(--layout--size--10);
  display: flex;
}
[class*="fg11"] {
  grid-column-gap: var(--layout--size--11);
  grid-row-gap: var(--layout--size--11);
  display: flex;
}
[class*="fg12"] {
  grid-column-gap: var(--layout--size--12);
  grid-row-gap: var(--layout--size--12);
  display: flex;
}
[class*="fg13"] {
  grid-column-gap: var(--layout--size--13);
  grid-row-gap: var(--layout--size--13);
  display: flex;
}
/*
 margin top classes -----------------------------*/
[class*="mt-auto"] {
  margin-top: auto;
}
[class*="mt0"] {
  margin-top: var(--layout--size--0);
}
[class*="mt1"] {
  margin-top: var(--layout--size--1);
}
[class*="mt2"] {
  margin-top: var(--layout--size--2);
}
[class*="mt3"] {
  margin-top: var(--layout--size--3);
}
[class*="mt4"] {
  margin-top: var(--layout--size--4);
}
[class*="mt5"] {
  margin-top: var(--layout--size--5);
}
[class*="mt6"] {
  margin-top: var(--layout--size--6);
}
[class*="mt7"] {
  margin-top: var(--layout--size--7);
}
[class*="mt8"] {
  margin-top: var(--layout--size--8);
}
[class*="mt9"] {
  margin-top: var(--layout--size--9);
}
[class*="mt10"] {
  margin-top: var(--layout--size--10);
}
[class*="mt11"] {
  margin-top: var(--layout--size--11);
}
[class*="mt12"] {
  margin-top: var(--layout--size--12);
}
[class*="mt13"] {
  margin-top: var(--layout--size--13);
}
/* 
  margin bottom classes -----------------------------*/
[class*="mb-auto"] {
  margin-bottom: auto;
}
[class*="mb0"] {
  margin-bottom: var(--layout--size--0);
}
[class*="mb1"] {
  margin-bottom: var(--layout--size--1);
}
[class*="mb2"] {
  margin-bottom: var(--layout--size--2);
}
[class*="mb3"] {
  margin-bottom: var(--layout--size--3);
}
[class*="mb4"] {
  margin-bottom: var(--layout--size--4);
}
[class*="mb5"] {
  margin-bottom: var(--layout--size--5);
}
[class*="mb6"] {
  margin-bottom: var(--layout--size--6);
}
[class*="mb7"] {
  margin-bottom: var(--layout--size--7);
}
[class*="mb8"] {
  margin-bottom: var(--layout--size--8);
}
[class*="mb9"] {
  margin-bottom: var(--layout--size--9);
}
[class*="mb10"] {
  margin-bottom: var(--layout--size--10);
}
[class*="mb11"] {
  margin-bottom: var(--layout--size--11);
}
[class*="mb12"] {
  margin-bottom: var(--layout--size--12);
}
[class*="mb13"] {
  margin-bottom: var(--layout--size--13);
}
/*
margin left/right auto classes -----------------------------*/
[class*="m-auto"] {
  margin-left: auto;
  margin-right: auto;
}
[class*="ml-auto"] {
  margin-left: auto;
}
[class*="mr-auto"] {
  margin-right: auto;
}
/*
padding classes -------------------------------------------*/
[class*="p0"] {
  padding: var(--layout--size--0);
}
[class*="p1"] {
  padding: var(--layout--size--1);
}
[class*="p2"] {
  padding: var(--layout--size--2);
}
[class*="p3"] {
  padding: var(--layout--size--3);
}
[class*="p4"] {
  padding: var(--layout--size--4);
}
[class*="p5"] {
  padding: var(--layout--size--5);
}
[class*="p6"] {
  padding: var(--layout--size--6);
}
[class*="p7"] {
  padding: var(--layout--size--7);
}
[class*="p8"] {
  padding: var(--layout--size--8);
}
[class*="p9"] {
  padding: var(--layout--size--9);
}
[class*="p10"] {
  padding: var(--layout--size--10);
}
[class*="p11"] {
  padding: var(--layout--size--11);
}
[class*="p12"] {
  padding: var(--layout--size--12);
}
[class*="p13"] {
  padding: var(--layout--size--13);
}
[class*="pt0"] {
  padding-top: var(--layout--size--0);
}
[class*="pt1"] {
  padding-top: var(--layout--size--1);
}
[class*="pt2"] {
  padding-top: var(--layout--size--2);
}
[class*="pt3"] {
  padding-top: var(--layout--size--3);
}
[class*="pt4"] {
  padding-top: var(--layout--size--4);
}
[class*="pt5"] {
  padding-top: var(--layout--size--5);
}
[class*="pt6"] {
  padding-top: var(--layout--size--6);
}
[class*="pt7"] {
  padding-top: var(--layout--size--7);
}
[class*="pt8"] {
  padding-top: var(--layout--size--8);
}
[class*="pt9"] {
  padding-top: var(--layout--size--9);
}
[class*="pt10"] {
  padding-top: var(--layout--size--10);
}
[class*="pt11"] {
  padding-top: var(--layout--size--11);
}
[class*="pt12"] {
  padding-top: var(--layout--size--12);
}
[class*="pt13"] {
  padding-top: var(--layout--size--13);
}
[class*="pr0"] {
  padding-right: var(--layout--size--0);
}
[class*="pr1"] {
  padding-right: var(--layout--size--1);
}
[class*="pr2"] {
  padding-right: var(--layout--size--2);
}
[class*="pr3"] {
  padding-right: var(--layout--size--3);
}
[class*="pr4"] {
  padding-right: var(--layout--size--4);
}
[class*="pr5"] {
  padding-right: var(--layout--size--5);
}
[class*="pr6"] {
  padding-right: var(--layout--size--6);
}
[class*="pr7"] {
  padding-right: var(--layout--size--7);
}
[class*="pr8"] {
  padding-right: var(--layout--size--8);
}
[class*="pr9"] {
  padding-right: var(--layout--size--9);
}
[class*="pr10"] {
  padding-right: var(--layout--size--10);
}
[class*="pr11"] {
  padding-right: var(--layout--size--11);
}
[class*="pr12"] {
  padding-right: var(--layout--size--12);
}
[class*="pr13"] {
  padding-right: var(--layout--size--13);
}
[class*="pb0"] {
  padding-bottom: var(--layout--size--0);
}
[class*="pb1"] {
  padding-bottom: var(--layout--size--1);
}
[class*="pb2"] {
  padding-bottom: var(--layout--size--2);
}
[class*="pb3"] {
  padding-bottom: var(--layout--size--3);
}
[class*="pb4"] {
  padding-bottom: var(--layout--size--4);
}
[class*="pb5"] {
  padding-bottom: var(--layout--size--5);
}
[class*="pb6"] {
  padding-bottom: var(--layout--size--6);
}
[class*="pb7"] {
  padding-bottom: var(--layout--size--7);
}
[class*="pb8"] {
  padding-bottom: var(--layout--size--8);
}
[class*="pb9"] {
  padding-bottom: var(--layout--size--9);
}
[class*="pb10"] {
  padding-bottom: var(--layout--size--10);
}
[class*="pb11"] {
  padding-bottom: var(--layout--size--11);
}
[class*="pb12"] {
  padding-bottom: var(--layout--size--12);
}
[class*="pb13"] {
  padding-bottom: var(--layout--size--13);
}
[class*="pl0"] {
  padding-left: var(--layout--size--0);
}
[class*="pl1"] {
  padding-left: var(--layout--size--1);
}
[class*="pl2"] {
  padding-left: var(--layout--size--2);
}
[class*="pl3"] {
  padding-left: var(--layout--size--3);
}
[class*="pl4"] {
  padding-left: var(--layout--size--4);
}
[class*="pl5"] {
  padding-left: var(--layout--size--5);
}
[class*="pl6"] {
  padding-left: var(--layout--size--6);
}
[class*="pl7"] {
  padding-left: var(--layout--size--7);
}
[class*="pl8"] {
  padding-left: var(--layout--size--8);
}
[class*="pl9"] {
  padding-left: var(--layout--size--9);
}
[class*="pl10"] {
  padding-left: var(--layout--size--10);
}
[class*="pl11"] {
  padding-left: var(--layout--size--11);
}
[class*="pl12"] {
  padding-left: var(--layout--size--12);
}
[class*="pl13"] {
  padding-left: var(--layout--size--13);
}
[class*="ph0"] {
  padding-inline: var(--layout--size--0);
}
[class*="ph1"] {
  padding-inline: var(--layout--size--1);
}
[class*="ph2"] {
  padding-inline: var(--layout--size--2);
}
[class*="ph3"] {
  padding-inline: var(--layout--size--3);
}
[class*="ph4"] {
  padding-inline: var(--layout--size--4);
}
[class*="ph5"] {
  padding-inline: var(--layout--size--5);
}
[class*="ph6"] {
  padding-inline: var(--layout--size--6);
}
[class*="ph7"] {
  padding-inline: var(--layout--size--7);
}
[class*="ph8"] {
  padding-inline: var(--layout--size--8);
}
[class*="ph9"] {
  padding-inline: var(--layout--size--9);
}
[class*="ph10"] {
  padding-inline: var(--layout--size--10);
}
[class*="ph11"] {
  padding-inline: var(--layout--size--11);
}
[class*="ph12"] {
  padding-inline: var(--layout--size--12);
}
[class*="ph13"] {
  padding-inline: var(--layout--size--13);
}
[class*="pv0"] {
  padding-block: var(--layout--size--0);
}
[class*="pv1"] {
  padding-block: var(--layout--size--1);
}
[class*="pv2"] {
  padding-block: var(--layout--size--2);
}
[class*="pv3"] {
  padding-block: var(--layout--size--3);
}
[class*="pv4"] {
  padding-block: var(--layout--size--4);
}
[class*="pv5"] {
  padding-block: var(--layout--size--5);
}
[class*="pv6"] {
  padding-block: var(--layout--size--6);
}
[class*="pv7"] {
  padding-block: var(--layout--size--7);
}
[class*="pv8"] {
  padding-block: var(--layout--size--8);
}
[class*="pv9"] {
  padding-block: var(--layout--size--9);
}
[class*="pv10"] {
  padding-block: var(--layout--size--10);
}
[class*="pv11"] {
  padding-block: var(--layout--size--11);
}
[class*="pv12"] {
  padding-block: var(--layout--size--12);
}
[class*="pv13"] {
  padding-block: var(--layout--size--13);
}