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

.Grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* flex-start; /* center */
  align-items: flex-start; /* center; */
  list-style: none;
  margin: 0 auto;
}

/* right to left */
.GridReverse {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* flex-start; /* center */
  align-items: flex-start; /* center; */  
  flex-direction: row-reverse;
  margin: 0 auto;
}


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



.Grid--1of2 > .Grid-cell {
  flex: 0 0 50%;
}

.Grid--1of3 > .Grid-cell {
  flex: 0 0 33.3333%;
}

.Grid--1of4 > .Grid-cell {
  flex: 0 0 25%;
}



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


@media screen {

  /* grid gutters */
  .Grid {
    margin: 0px 0px 0px -2rem;
  }

  .Grid > .Grid-cell,
  .Grid > .Grid-cell23,
  .Grid > .Grid-cell13 {
    padding: 0px 0px 0px 2rem;
  }

  .Grid > .Grid-cell img,
  .Grid > .Grid-cell23 img,
  .Grid > .Grid-cell13 img {
    max-width: 100%;
    height: auto;
  }

  .Grid-cell {
    flex: 100%;
  }

  .Grid-cell23 {
    flex: 100%;
    /* border: 1px solid pink; */
  }
  .Grid-cell13 {
    flex: 100%;
    /* border: 1px solid red; */
  }

}

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

  /* grid gutters */
  .Grid {
    margin: 0px 0px 0px -3em;
  }

  .Grid > .Grid-cell,
  .Grid > .Grid-cell23,
  .Grid > .Grid-cell13 {
    padding: 0px 0px 0px 3em;
  }  


  .Grid-cell {
    flex: 1;
  }

  .Grid-cell23 {
    flex: 66.6666%;
  }
  .Grid-cell13 {
    flex: 33.3333%;
  }

}


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

}