.list {
  --gap: 3rem;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  @media (min-width: 1024px) {
    flex-direction: row;
    flex-wrap: wrap;
  }
}
.list__item {
  @media (min-width: 1024px) {
    flex: auto;
  }
}

.list-2 {
  --gap: 1rem;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  @media (min-width: 1024px) {
    flex-direction: row;
    flex-wrap: wrap;
  }
}
.list-2__item {
  --inserted-gap: var(--gap);
  @media (min-width: 1024px) {
    flex: auto;
  }
}

.list-3 {
  display: flex;
  flex-direction: column;
  gap: var(--inserted-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
.list-3__item {
}