/* 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 {
  flex: 1;
}

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


.Grid--flexCells > .Grid-cell {
  display: flex;
}

.Grid--top {
  align-items: flex-start;
}

.Grid--bottom {
  align-items: flex-end;
}

.Grid--center {
  align-items: center;
}

.Grid--justifyCenter {
  justify-content: center;
}

.Grid-cell--top {
  align-self: flex-start;
}

.Grid-cell--bottom {
  align-self: flex-end;
}

.Grid-cell--center {
  align-self: center;
}

.Grid-cell--autoSize {
  flex: none;
}

.Grid--fit > .Grid-cell {
  flex: 1;
}

.Grid--full > .Grid-cell {
  flex: 0 0 100%;
}

.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 (min-width: 0px) {
  .small-Grid--fit > .Grid-cell {
    flex: 1;
  }
  .small-Grid--full > .Grid-cell {
    flex: 0 0 100%;
  }
  .small-Grid--1of2 > .Grid-cell {
    flex: 0 0 50%;
  }
  .small-Grid--1of3 > .Grid-cell {
    flex: 0 0 33.3333%;
  }
  .small-Grid--1of4 > .Grid-cell {
    flex: 0 0 25%;
  }
}

@media (min-width: 400px) {
  .med-Grid--fit > .Grid-cell {
    flex: 1;
  }
  .med-Grid--full > .Grid-cell {
    flex: 0 0 100%;
  }
  .med-Grid--1of2 > .Grid-cell {
    flex: 0 0 50%;
  }
  .med-Grid--1of3 > .Grid-cell {
    flex: 0 0 33.3333%;
  }
  .med-Grid--1of4 > .Grid-cell {
    flex: 0 0 25%;
  }
}

@media (min-width: 800px) {
  .large-Grid--fit > .Grid-cell {
    flex: 1;
  }
  .large-Grid--full > .Grid-cell {
    flex: 0 0 100%;
  }
  .large-Grid--1of2 > .Grid-cell {
    flex: 0 0 50%;
  }
  .large-Grid--1of3 > .Grid-cell {
    flex: 0 0 33.3333%;
  }
  .large-Grid--1of4 > .Grid-cell {
    flex: 0 0 25%;
  }
}

/* grid gutters */
.Grid--gutters {
  margin: 0px 0px 0px -2.727272rem; /* 1.3636363636rem; */
}
.Grid--gutters > .Grid-cell {
  padding: 0px 0px 0px 2.727272rem; /* 1.3636363636rem; */
}

/*
.Grid--guttersLg {
  margin: 0 0 0 -1.5rem;
}
.Grid--guttersLg > .Grid-cell {
  padding: 0 0 0 1.5rem;
}
*/

/*
.Grid--guttersXl {
  margin: 0 0 0 -2rem;
}
.Grid--guttersXl > .Grid-cell {
  padding: 0 0 0 2rem;
}
*/



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


@media screen {

  .g1of2 {
    flex: 0 0 100%;
  }
  .g1of3 {
    flex: 0 0 100%;
  }

  .g1of4 {
    flex: 0 0 100%;
  }
  .g2of4 {
    flex: 0 0 100%;
  }  

}

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

  .g1of2 {
    flex: 0 0 50%;
  }
  .g1of3 {
    flex: 0 0 33.3333%;
  }

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

}


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

}