/****  color-section with custum-class:  grid7 -  and  7 1/4 columns with no equal height ********/

.grid7 .entry-content-wrapper {
  display: grid;
  margin: 0;
  gap: 40px;   /*** gap value is important for the left value of images that should shift ***/
  grid-auto-flow: row;
  grid-template-columns: repeat(4, 1fr);
}

/*** because pseudo containers would also be subject to the grid layout, they are hidden ***/
.grid7 .entry-content-wrapper:before,
.grid7 .entry-content-wrapper:after {
  display: none
}

/*** Cancel Enfold Theme Settings ***/
.grid7 .entry-content-wrapper .flex_column {
  width: unset !important;
  margin: 0 !important;
}


.grid7 .entry-content-wrapper .flex_column .avia-image-container-inner {
  width: 100% !important;
}

.grid7 .entry-content-wrapper .flex_column img{
  width: 100% !important;
}


/* =======  Media Query Settings ========*/

@media only screen and (min-width: 990px) {
  .grid7 .entry-content-wrapper .flex_column:nth-of-type(n+5) {
    left: calc(50% + 20px);   /**** shift beginning at 5th column is 50% plus half of gap-value ****/
  }
}


@media only screen and (min-width: 550px) and (max-width: 989px) {
  .grid7 .entry-content-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid7 .entry-content-wrapper .flex_column:nth-of-type(n+7) {
    left: calc(50% + 20px);
  }
}


@media only screen and (max-width: 549px) {
  .grid7 .entry-content-wrapper {
    grid-template-columns: 1fr;
  }
}