Can’t make grid row slim

it is the flex_cell setting – because default padding of flex_cell is 30px . You can set it for each flex_cell now or give a custom class to the grid-row – f.e. stepcolor-separator and set in quick css:

#top .stepcolor-separator .flex_cell {
  padding: 10px
}

PS: do not forget to set on advanced tab the mobile behavior : “Cell appear besides each other …”

if you do have this very often – and you like to avoid to many DOM Elements – you can have a separator that way by using the pseudocontainer “after” for it.

Best is to do it with a custom class on the sections.

.avia-section { 
  position: relative !important;
}

.avia-section:after { 
  content: "";
  position: absolute !important;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 15px;
  background-image: -webkit-linear-gradient(90deg, #719430 33%, #92bb46 33%, #92bb46 66%, #acd464 66%);
  background-image: linear-gradient(90deg, #719430 33%, #92bb46 33%, #92bb46 66%, #acd464 66%);
  background-size: cover;
  background-repeat: no-repeat;
}

you see how the gradient works?