.layout--four-column-25-25-25-25 {
  display: flex;
  gap:  1rem;
  padding: 1rem;
  outline: solid 1px orange;
}

.layout--four-column-25-25-25-25 > .layout__region {
  padding: 1rem;
  outline: solid 1px orange;
}

.layout--four-column-25-25-25-25 > .layout__region--first {
  flex-basis: 25%;
}

.layout--four-column-25-25-25-25 > .layout__region--second {
  flex-basis: 25%;
}

.layout--four-column-25-25-25-25 > .layout__region--third {
  flex-basis: 25%;
}

.layout--four-column-25-25-25-25 > .layout__region--forth {
  flex-basis: 25%;
}

@media all and (max-width: 850px) {
  .layout--four-column-25-25-25-25 {
    flex-direction: column;
  }
  .layout--four-column-25-25-25-25 > .layout__region {
    flex-basis: auto;
  }
}