
    /* TODO: pass it to owo default */
.card__wrapper {
  flex-direction: column;
}

.hero-column-3 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hero-column-3 > div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px 8px;
}

/* columns */

/* span-4: 4 колонки */
#grid-common > .card__wrapper {
  grid-column: span 4;
}

@media screen and (max-width: 1680px) {
  #grid-common > .card__wrapper {
    grid-column: span 3;
  }
}

@media screen and (max-width: 1268px) {
  #grid-common > .card__wrapper {
    grid-column: span 4;
  }
}

@media screen and (max-width: 858px) {
  #grid-common > .card__wrapper {
    grid-column: span 3;
  }
}

@media screen and (max-width: 650px) {
  #grid-common > .card__wrapper {
    grid-column: span 2;
  }
}

@media screen and (max-width: 444px) {
  #grid-common > .card__wrapper {
    grid-column: span 1;
  }
}

/* columns */