:root {
  --cols: 1;
  --gap: 15px;
  --gaps: calc(var(--gap) * (var(--cols) - 1));
}

.card__main {
  margin-bottom: 30px;
}

@media (min-width: 768px) {
  :root {
    --cols: 2;
    --gap: 15px;
  }

  .header__middle {
    display: flex;
    flex-direction: row;
  }
  .header__subtitle_lang {
    margin-right: 44px;
  }
  .header__subtitle_nav {
    margin-right: 10px;
  }
  .header__subtitle_nav:last-of-type {
    margin-right: 0px;
  }

  .header__subtitle_sign {
    display: initial;
  }
  /* =======  end header ======= */

  .card {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
  }
  .card__main {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc((100% - var(--gaps)) / var(--cols));
    margin-bottom: 0px;
  }
  .card__main {
    width: calc(25% - var(--gap));
  }
}

@media (min-width: 992px) {
  :root {
    --cols: 3;
    --gap: 15px;
  }
  .header__main {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .header__subtitle {
    margin-top: 0;
  }
  .header__up {
    order: 1;
  }
}

@media (min-width: 1200px) {
  :root {
    --cols: 4;
    --gap: 15px;
  }
}