/* grid, grid__item */
@media (width >=1200px) {
  :root {
    --grid-gap: 60px;
    --grid-item-gap: 20px;
  }
}

@media (768px <= width < 1200px) {
  :root {
    --grid-gap: 40px;
    --grid-item-gap: 20px;
  }
}

@media (width < 768px) {
  :root {
    --grid-gap: 30px;
    --grid-item-gap: 20px;
  }
}

.grid {
  display: grid;
  column-gap: var(--grid-gap);
  align-content: start;
  min-width: 0;
}

.grid__item {
  display: flex;
  flex-direction: column;
  row-gap: var(--grid-item-gap);
  min-width: 0;
  margin-bottom: var(--grid-gap);
}



/* modificators */
._sticked,
._sticked-phone,
._sticked-tablet,
._sticked-desktop {
  top: calc(var(--top-sticky-height, 0px) + var(--grid-item-gap, 0px));
  z-index: 1;
  /* перебиваем z-index всех остальных элементов без явного указания,
  чтобы дочерние элементы у ._sticked имели приоритет и их position: fixed не ломался */
}

._sticked {
  position: sticky;
}

/* Phone */

@media (width < 768px) {
  ._hidden-phone {
    display: none !important;
  }

  ._sticked-phone {
    position: sticky;
  }
}

/* Tablet */

@media (768px <= width < 1200px) {
  ._hidden-tablet {
    display: none !important;
  }

  ._sticked-tablet {
    position: sticky;
  }
}

/* Desktop */

@media (width >= 1200px) {
  ._hidden-desktop {
    display: none !important;
  }

  ._sticked-desktop {
    position: sticky;
  }
}

.form__row > * {
	flex: 1;
}