/* https://philipwalton.github.io/solved-by-flexbox/demos/grids/ */

.Grid {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
}

/* right to left */
.GridReverse {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  list-style: none;
  margin: 0;
}

.Grid-cell {
  flex: 1;
  overflow: hidden;
}

.Grid-cell img {
  max-width: 100%;
  height: auto;
}


/* images in worksingle */
.images p {
  margin-bottom: 0.5rem;
  padding-left: 0px; /* 1rem; */
}
.images p img {
  box-shadow: 0 5px 12px rgba(0,0,0,0.15);
}


/* *********************************************************************** */

/* grid gutters */

.Grid--gutters {
  margin: -1em 0 1em -1em;
}
.Grid--gutters > .Grid-cell {
  padding: 1em 0 0 1em;
}

.Grid--guttersLg {
  margin: 0 0 0 -1.5em;
}
.Grid--guttersLg > .Grid-cell {
  padding: 0 0 0 1.5em;
}

.Grid--guttersXl {
  margin: 0 0 0 -5rem;
}
.Grid--guttersXl > .Grid-cell {
  padding: 0 0 0 5rem;
}



/* ************************************************************************************* */
/* ************************************************************************************* */
/* ************************************************************************************* */
/* media queries */


@media screen {

  /* VISTIS addendum */
  .g1of2 {
    flex: 0 0 100% !important;
  }
  .g1of3 {
    flex: 0 0 100% !important;
  }
  .g2of3 {
    flex: 0 0 100% !important;
  }

  .g1of4 {
    flex: 0 0 25% !important;
  }
  .g2of4 {
    flex: 0 0 50% !important;
  }

  .g1of5 {
    flex: 0 0 100% !important;
  }
  .g2of5 {
    flex: 0 0 100% !important;
  }  
  .g3of5 {
    flex: 0 0 100% !important;
  }


  .g2of9 {
    flex: 100%;
  }
  .g3of9 {
    flex: 100%;
  }
  .g4of9 {
    flex: 100%;
  }



}


/* ************************************************************************************* */
@media screen and (min-width: 800px) {


}


/* ************************************************************************************* */
@media screen and (min-width: 1024px) {

  


  .g1of5 {
    flex: 0 0 20% !important;
  }  
  .g2of5 {
    flex: 0 0 40% !important;
  }
  .g3of5 {
    flex: 0 0 60% !important;
  }



  .g2of9 {
    flex: 22.2222%;
  }
  .g3of9 {
    flex: 33.3333%;
  }
  .g4of9 {
    flex: 44.4444%;
  }


}

/* ************************************************************************************* */
@media screen and (min-width: 1280px) {


  .g1of2 {
    flex: 0 0 50% !important;
  }


  .g1of3 {
    flex: 0 0 33.3333% !important;
  }
  .g2of3 {
    flex: 0 0 66.6666% !important;
  }

  
    
}