
.grid {
  /* Каркас сетки */
  --gridOverflow: visible;
  --gridWidth: 100%;
  --gridDisplay: flex;
  --gridColumns: var(--gridColumnsMobile); /* вычисляется автоматически на основании @media */
  --gridGap: var(--gridGapMobile); /* вычисляется автоматически на основании @media  */
  --gridMb: 0;
  --gridAlignItems: var(--gridAlignItemsMobile); /* вычисляется автоматически на основании @media */
  --gridJustifyContent: var(--gridJustifyContentMobile); /* вычисляется автоматически на основании @media */

  /* Элемент сетки */
  --gridItemMargin: var(--gridItemMarginMobile); /* вычисляется автоматически на основании @media */
  --gridItemWidth: auto; /* вычисляется автоматически на основании var(--gridColumns)  */
  --gridItemDisplay: flex;
  --gridItemAlignSelf: unset;
  --gridItemMinHeight: auto;
  --gridItemOverflow: visible;
  --gridItemFlexFlow: column;
  --gridItemOrder: unset;

  /* Колонки, отступы и выравнивание: mobile */
  --gridGapMobile: 2rem;
  --gridColumnsMobile: 1;
  --gridItemMarginMobile: 0;
  --gridAlignItemsMobile: unset;
  --gridJustifyContentMobile: unset;

  /* Колонки, отступы и выравнивание: tablet */
  --gridGapTablet: 2rem;
  --gridColumnsTablet: 2;
  --gridItemMarginTablet: 0;
  --gridAlignItemsTablet: unset;
  --gridJustifyContentTablet: unset;

  /* Колонки, отступы и выравнивание: desktop */
  --gridGapDesktop: 2rem;
  --gridColumnsDesktop: 3;
  --gridItemMarginDesktop: 0;
  --gridAlignItemsDesktop: unset;
  --gridJustifyContentDesktop: unset;

  /* Tablet styles */
  @media(--mobileAbove) {
    --gridGap: var(--gridGapTablet, "2rem");
    --gridColumns: var(--gridColumnsTablet, 2);
    --gridItemMargin: var(--gridItemMarginTablet, 0);
    --gridAlignItems: var(--gridAlignItemsTablet, unset);
    --gridJustifyContent: var(--gridJustifyContentTablet, unset);
  }

  /* Desktop styles */
  @media(--tabletAbove) {
    --gridGap: var(--gridGapDesktop, "2rem");
    --gridColumns: var(--gridColumnsDesktop, 3);
    --gridItemMargin: var(--gridItemMarginDesktop, 0);
    --gridAlignItems: var(--gridAlignItemsDesktop, unset);
    --gridJustifyContent: var(--gridJustifyContentDesktop, unset);
  }
}
