.ui-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  margin: 0 var(--grid-margin);
  gap: var(--grid-row-gap, var(--grid-gap)) var(--grid-col-gap, var(--grid-gap));
  /* need to overwrite base behaviour */
  grid-template-areas: none;

  &.ui-grid-product-grid {
    --_col-start: 1;
    --_multiplier: 0;
    --grid-row-gap: var(--gap-3xl);
    --grid-col-gap: var(--gap-xs);

    > .ui-grid-item {
      --_item-span: 5;
      grid-column: calc(var(--_col-start) + var(--_item-span) * (var(--_multiplier) - 1)) / span var(--_item-span);

      @media screen and (min-width: 1000px) {
        &:nth-child(4n + 3),
        &:nth-child(4n) {
          --_col-start: calc(var(--grid-cols) - var(--_item-span) * 4 + 1);
        }
      }

      @media screen and (max-width: 999px) {
        --_item-span: 10;

        &:nth-child(2n) {
          --_col-start: calc(var(--grid-cols) - var(--_item-span) * 2 + 1);
        }
      }
    }
  }

  &.responsive-row-gap {
    row-gap: var(--mobile-gap);

    @media screen and (min-width: 1000px) {
      row-gap: var(--gap);
    }
  }
}