/* ===  or with a more modern way to style the flex-box  === */

#top .my-flexbox {
  --flex-gap: 20px;
  --flex-count: 5;
}

#top .avia-section.my-flexbox .entry-content-wrapper {
  display: flex;
  flex-flow: row wrap;
  gap: var(--flex-gap);
  justify-content: center;
  align-items: stretch;     /* ===  stretches the items (columns) to have equal height on each row   === */
}

#top .avia-section.my-flexbox .entry-content-wrapper:before,
#top .avia-section.my-flexbox .entry-content-wrapper:after {
  flex: 0 0 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: absolute; /* Takes it out of the (document) flow */
}

#top .avia-section.my-flexbox .entry-content-wrapper .flex_column {
  box-sizing: border-box !important; 
  flex: 0 0 calc((100% - (var(--flex-count) - 1) * var(--flex-gap)) / var(--flex-count));
  width: unset !important;
  margin: 0 !important;
  padding: 30px; /* you can change here padding of the columns at once */
}


/* Media Queries: Override Only the Variable */

@media only screen and (max-width: 1199px) {
  #top .my-flexbox {
    --flex-count: 4;
  }
}

@media only screen and (max-width: 989px) {
  #top .my-flexbox {
    --flex-count: 3;
  }
}

@media only screen and (max-width: 767px) {
  #top .my-flexbox {
     --flex-count: 2;
  }
}

@media only screen and (max-width: 569px) {
  #top .my-flexbox {
     --flex-count: 1;
  }
}