.container {
  max-width: var(--grid-max-width);
  margin-left: auto;
  margin-right: auto;
}
.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap, 24px);
}

/* ---------------------------------------------------------
   Управление шириной элементов через data-col
   --------------------------------------------------------- */

.grid > [data-col="1"] {
  grid-column: span 1;
}

.grid > [data-col="2"] {
  grid-column: span 2;
}

.grid > [data-col="3"] {
  grid-column: span 3;
}

.grid > [data-col="4"] {
  grid-column: span 4;
}

@media (max-width: 2000px) {
  .container {
    margin: 0 8vw;
  }
}

@media (max-width: 990px) {
  .container {
    margin: 0 6vw;
  }

  .grid > [data-col="2"] {
    grid-column: span 2;
  }
  .grid > [data-col="3"] {
    grid-column: span 3;
  }
}
@media (max-width: 699px) {
  .grid > [data-col="1"] {
    grid-column: span 2;
  }
  .grid > [data-col="3"] {
    grid-column: span 4;
  }
}

@media (max-width: 640px) {
  .grid > [data-col="2"] {
    grid-column: span 4;
  }
  .grid > * {
    min-width: 0;
  }
}
@media (max-width: 375px) {
  .grid {
    gap: 10px;
  }
  .container {
    margin: 0 4vw;
  }
}