/*-----------------------------------------------------------------------------------*/
/*  Grid Content > individueller Inhalt > nur für Darstellung des Basis-Beispiels
/*-----------------------------------------------------------------------------------*/
body {
  margin: 0;
  height: 100vh;
  padding: 20px;
  background-color: #808080;
}

.wbox-fgrid-content {
  min-height: 200px; 
  /* width: ergibt sich durch die div-Berechnung */
}
.col2 > .wbox-fgrid-content {
  background-color: #aeba1e;
}
.col3 > .wbox-fgrid-content {
  background-color: #8f991d;
}
.col4 > .wbox-fgrid-content {
  background-color: #727a14;
}


/*-----------------------------------------------------------------------------------*/
/*  Grid Columns - Allgemeine Einstellungen
/*-----------------------------------------------------------------------------------*/
.wbox-fgrid-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 auto;
}

.wbox-fgrid-wrap > div {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    margin-bottom: 30px;
}


/*-----------------------------------------------------------------------------------*/
/*  Grid 2 Columns - Responsive für Desktop und Mobile
/*-----------------------------------------------------------------------------------*/

@media (min-width: 768px) {
  .col2 > div:nth-child(2n+1) {
    margin-right: 30px;
  }
  .col2 > div {
    width: -webkit-calc(50% - 15px);
    width: calc(50% - 15px);
    -webkit-flex-basis: -webkit-calc(50% - 15px);
    -ms-flex-preferred-size: calc(50% - 15px);
    flex-basis: calc(50% - 15px);
    flex: 0 1 auto;
  }
}
  
@media (max-width: 767px) {
  .col2 > div {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    margin-bottom: 15px;
  } 
}


/*-----------------------------------------------------------------------------------*/
/*  Grid 3 Columns - Responsive für Desktop und Mobile
/*-----------------------------------------------------------------------------------*/

@media (min-width: 768px) {
  .col3 > div:nth-child(3n+1), .col3 > div:nth-child(3n+2) {
    margin-right: 30px;
  }
  .col3 > div:nth-child(3n+3) {
    margin-right: 0;
  }
  .col3 > div {
    width: -webkit-calc(33.33333% - 20px);
    width: calc(33.33333% - 20px);
    max-width: -webkit-calc(33.33333% - 20px);
    max-width: calc(33.33333% - 20px);
    -webkit-flex-basis: -webkit-calc(33.33333% - 20px);
    -ms-flex-preferred-size: calc(33.33333% - 20px);
    flex-basis: calc(33.33333% - 20px);
    flex: 0 1 auto;
  }
}
  
@media (max-width: 767px) {
  .col3 > div:nth-child(2n+1) {
    margin-right: 15px;
  }    
  .col3 > div {
    width: -webkit-calc(50% - 7.5px);
    width: calc(50% - 7.5px);
    -webkit-flex-basis: -webkit-calc(50% - 7.5px);
    -ms-flex-preferred-size: calc(50% - 7.5px);
    flex-basis: calc(50% - 7.5px);
    flex: 0 1 auto;
  }
  .col3 > div {
      margin-bottom: 15px;
  }
}


/*-----------------------------------------------------------------------------------*/
/*  Grid 4 Columns - Responsive für Desktop und Mobile
/*-----------------------------------------------------------------------------------*/

@media (min-width: 768px) {
  .col4 > div:nth-child(4n+1), .col4 > div:nth-child(4n+2), .col4 > div:nth-child(4n+3) {
    margin-right: 30px;
  }
  .col4 > div:nth-child(4n+4) {
    margin-right: 0;
  }
  .col4 > div {
    width: -webkit-calc(25% - 22.5px);
    width: calc(25% - 22.5px);
    max-width: -webkit-calc(25% - 22.5px);
    max-width: calc(25% - 22.5px);
    -webkit-flex-basis: -webkit-calc(25% - 22.5px);
    -ms-flex-preferred-size: calc(25% - 22.5px);
    flex-basis: calc(25% - 22.5px);
    flex: 0 1 auto;
  }
}
  
@media (max-width: 767px) {
  .col4 > div:nth-child(2n+1) {
    margin-right: 15px;
  }
  .col4 > div {
    width: -webkit-calc(50% - 7.5px);
    width: calc(50% - 7.5px);
    -webkit-flex-basis: -webkit-calc(50% - 7.5px);
    -ms-flex-preferred-size: calc(50% - 7.5px);
    flex-basis: calc(50% - 7.5px);
    flex: 0 1 auto;
  }
  .col4 > div {
      margin-bottom: 15px;
  }
}