Smaller columns structure 1/6 1/3 1/6 1/3

i would layout four 1/4 columns inside a color section with a custom class f.e.: special-sixth-grid

and then place this to your quick css:
( fr is abreviation for fraction – means part – so if there are for 100% = 6fr : 1fr 2fr 1fr 2fr that is your setting of 1/6 2/6 1/6 2/6 )

#top .special-sixth-grid .entry-content-wrapper {
  display: grid;
  margin: 0;
  gap: 20px;
  grid-auto-flow: row;
  grid-template-columns: 1fr 2fr 1fr 2fr; 
  align-self: stretch
}

@media only screen and (min-width: 768px) and (max-width: 989px) {
  .responsive #top .special-sixth-grid .entry-content-wrapper {
    gap: 20px;
    grid-template-columns: 1fr 2fr; 
  }
}

@media only screen and (max-width: 767px) {
  .responsive #top .special-sixth-grid .entry-content-wrapper {
    gap: 20px;
    grid-template-columns: 1fr; 
  }
}

#top .special-sixth-grid .entry-content-wrapper:before,
#top .special-sixth-grid .entry-content-wrapper:after {
  display: none;
}

#top .special-sixth-grid .entry-content-wrapper .flex_column {
  width: unset !important;
  margin: 0 !important;
}

see an example page ( only the top part – i added to an existing example page ): https://webers-testseite.de/4on1-flexbox-model/