.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--grid-gap-mobile);
}
.row > .column {
  width: 100%;
}
.row-turned {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: var(--grid-gap-mobile);
}
.row-turned > .column {
  height: 50%;
}

.grid {
  display: grid;
  gap: var(--grid-gap-mobile);
  grid-auto-rows: 1fr; 
}

.grid-25 {
  grid-template-columns: repeat(1, 1fr);
}


@media screen and (min-width: 768px) {
  .row {
    flex-wrap: nowrap;
  }
  .row.no-columns-till-desktop {
    flex-wrap: wrap;
  }  
  .row > .column {
    width: 50%;
  }
  .row.no-columns-till-desktop > .column {
    width: 100%;
  }  
  .row-4060 > .column:first-child {
    width: 40%;
  }
  .row-4060 > .column:last-child {
    width: 60%;
  }
  .row-6040 > .column:first-child {
    width: 60%;
  }
  .row-6040 > .column:last-child {
    width: 40%;
  }

  .grid-25 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 1024px) {
  .row.no-columns-till-desktop {
    flex-wrap: nowrap;
  }  
  .row.no-columns-till-desktop > .column {
    width: 50%;
  }  
  .row, .row-turned {
    gap: var(--grid-gap-desktop);
  }
  .row-4060 {
    gap: var(--grid-gap-mobile); /* small is being kept */
  }
  .row-6040 {
    gap: var(--grid-gap-mobile); /* small is being kept */
  }
  .grid-25 {
    grid-template-columns: repeat(4, 1fr);
  }
}