* {
    padding:0;
     margin:0;
     -moz-box-sizing:    border-box;
  -webkit-box-sizing:    border-box;
       -o-box-sizing:    border-box;
          box-sizing:    border-box;
}
body {
  padding: 40px 2% 40px;
}
h1 {
  color: white;
}
.grid {
  background: white;
  margin: 0 0 20px 0;
}
.grid:after {
  content: "";
  display: table;
  clear: both;
}
.grid [class*='col-'] {
  float: left;
}
/*.grid [class*='col-']:last-of-type {
  padding-bottom: 0;
}
*/

/* Opt-in outside padding */


.grid-pad [class*='col-'] {
  padding-right: 20px;
  padding-bottom: 20px;
  border:1px dashed orange;
}

.grid-pad {
   padding: 20px 0 0 20px;
   border:1px dashed blue;
}
.col-2-3, 
.col-1-3,
.col-1-2,
.col-1-4, 
.col-1-8,
.col-3-4 {
  width: 100%; 
}
.module {
  padding: 20px;
   border:1px dashed yellow;
}



    @media screen and (min-width:600px) {   /* Startseite: 1-4 are shown 1-2 */

      .col-1-4, 
      .col-1-8 {
      width: 50%;
      }
      .col-1-4:nth-child(2n+1) {
        clear: both;
      }
    }

             @media screen and (min-width:700px) {   /* Detailseite 1-2 are shown 1-2  */
                .col-1-2 {
                width: 50%;
                }

             }



                   @media screen and (min-width:1000px) {   /* Startseite 1-4 are shown 1-2  */
                      .col-1-4 {
                       width: 25%;
                      }
                      .col-1-4:nth-child(2n+1) {
                      clear: none;
                      }
                   }



/* -----------------
   no need */

                            @media screen and (min-width:10000px) {


                            .grid [class*='col-'] {
                              float: left;
                              padding-right: 20px;
                              padding-bottom: 0;
                            }
                            .grid [class*='col-']:last-of-type {
                              padding-right: 0;
                            }

                            /* Opt-in outside padding */
                            .grid-pad {
                              padding: 20px 0 20px 20px;
                            }
                            .grid-pad [class*='col-']:last-of-type {
                              padding-right: 20px;
                            }

              }