/* ============== Grid für gridboxen =================================== */

.parent {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(0, 0fr);
grid-column-gap: 20px;
grid-row-gap: 20px;

margin-left:3%;
margin-right:3%;

}

/* === media screens von gross nach klein ===== */


@media only screen and (max-width: 1900px) {
         .parent {
         grid-template-columns: repeat(4, 1fr);
         grid-template-rows: repeat(0, 0fr);
         }

}

@media only screen and (max-width: 1700px) {
         .parent {
         grid-template-columns: repeat(4, 1fr);
         grid-template-rows: repeat(0, 0fr);
         }

}



@media only screen and (max-width: 1500px) {
         .parent {
         grid-template-columns: repeat(3, 1fr);
         grid-template-rows: repeat(0, 0fr);
         }


}

@media only screen and (max-width: 1200px) {
         .parent {
         grid-template-columns: repeat(2, 1fr);
         grid-template-rows: repeat(0, 0fr);
         }
}



@media only screen and (max-width: 760px) {
         .parent {
         grid-template-columns: repeat(1, 1fr);
         grid-template-rows: repeat(0, 0fr);
         }
}



/* ============== Grid für gridboxen 3er =================================== */

.threestyles {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(0, 0fr);
grid-column-gap: 20px;
grid-row-gap: 20px;

margin-left:3%;
margin-right:3%;

}

/* === media screens von gross nach klein ===== */


@media only screen and (max-width: 1900px) {
         .threestyles {
         grid-template-columns: repeat(3, 1fr);
         grid-template-rows: repeat(0, 0fr);
         }

}



@media only screen and (max-width: 1100px) {
         .threestyles {
         grid-template-columns: repeat(2, 1fr);
         grid-template-rows: repeat(0, 0fr);
         }
}


@media only screen and (max-width: 860px) {
         .threestyles {
         grid-template-columns: repeat(1, 1fr);
         grid-template-rows: repeat(0, 0fr);
         }
}



/* ============== Grid für gridboxen 4er / 2er =================================== */

.fourstyles {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(0, 0fr);
grid-column-gap: 20px;
grid-row-gap: 20px;

margin-left:3%;
margin-right:3%;

}

/* === media screens von gross nach klein ===== */


@media only screen and (max-width: 1900px) {
         .fourstyles {
         grid-template-columns: repeat(4, 1fr);
         grid-template-rows: repeat(0, 0fr);
         }

}



@media only screen and (max-width: 1500px) {
         .fourstyles {
         grid-template-columns: repeat(2, 1fr);
         grid-template-rows: repeat(0, 0fr);
         }
}


@media only screen and (max-width: 860px) {
         .fourstyles {
         grid-template-columns: repeat(1, 1fr);
         grid-template-rows: repeat(0, 0fr);
         }
}




/* ========== weiter mit ... ========= */

.gridbox {
    border:1px solid #CFCFCF;
    border-radius: 0px 0px 10px 10px;
    text-align:center;
    background-color:#EFEFEF;
    -webkit-transition: .1s ease-in-out;
          transition: .1s ease-in-out;
}



.gridbox:hover {
  border:1px solid #CFCFCF;

  -webkit-filter: brightness(1.03);
  filter: brightness(1.03);
  box-shadow: 1px 10px 25px #CFCFCF;
  -webkit-transition: .1s ease-in-out;
          transition: .1s ease-in-out;
}







.grid_padding {
         padding:0px 40px 30px 40px;
}


.vorteil {
         width:25%;
         margin-top:30px;

}



.grid_h2 {
         font-size:240%;
         margin-top:30px;
         margin-bottom:10px;

}


.grid_h3 {
         font-weight:300;
         font-size:150%;
         line-height:110%;
         margin-top:0px;
         margin-bottom:40px;

}

.grid_p {
         font-weight:300;
         margin-top:30px;
         -moz-hyphens: none;
         -o-hyphens: none;
         -webkit-hyphens: none;
         -ms-hyphens: none;
         hyphens: none;
}



@media only screen and (max-width: 1900px) {
         .grid_h2 {font-size:190%;}
         .grid_h3 {font-size:130%;}
         .grid_p {font-size:100%;}
}

@media only screen and (max-width: 1700px) {
         .grid_h2 {font-size:160%;}
         .grid_h3 {font-size:120%;}
         .grid_p {font-size:100%;}
}

@media only screen and (max-width: 1500px) {
         .grid_h2 {font-size:160%;}
         .grid_h3 {font-size:120%;}
         .grid_p {font-size:100%;}
}

@media only screen and (max-width: 1200px) {
         .grid_h2 {font-size:190%;}
         .grid_h3 {font-size:140%;}
         .grid_p {font-size:100%;}
}



@media only screen and (max-width: 760px) {
         .grid_h2 {font-size:210%;}
         .grid_h3 {font-size:160%;}
         .grid_p {font-size:100%;}
}

@media only screen and (max-width: 560px) {
         .grid_h2 {font-size:160%;}
         .grid_h3 {font-size:120%;}
         .grid_p {font-size:90%;}
}






/* =========== colors fourstyles ================= */
.bgfac { background-color:#40312a;}
.bgshab { background-color:#f3eee8;}
.bgstud { background-color:#000000;}
.bgsus { background-color:#eedfce;}



/* =================================== MOMA (Artikelboxen) ===================== */

.moma {display:grid; border:1px solid #afafaf; border-radius: 0px 0px 10px 10px; margin:8px}

.momapic {border:0px solid #000000;}
.momatxt {border:0px solid #FF0000; padding: 10px 5px 0px 10px;}
.momabut {border:0px solid #00BF00; padding: 0; margin:0px 0px 20px 20px;}
.momacde {border:0px solid #00C0FF;}


/* small hoch */

@media all and (min-width: 100px) {
.moma {
grid-template-columns: 100%;
grid-template-rows: 4fr;
width: 96%;
float:left;
}

.momapic {grid-column: 1 / 2; grid-row: 1 / 2;}
.momatxt {grid-column: 1 / 2; grid-row: 2 / 3; }
.momabut {grid-column: 1 / 2; grid-row: 3 / 4;}
.momacde {grid-column: 1 / 2; grid-row: 4 / 5; display:none;}


}



/* quer */

@media all and (min-width: 450px) {
.moma {
grid-template-columns: 33% 66%;
grid-template-rows: 2fr;
width:100%;
float:left;
}

.momapic {grid-column: 1 / 2; grid-row: 1 / 3;}
.momatxt {grid-column: 2 / 3; grid-row: 1 / 2;}
.momabut {grid-column: 2 / 3; grid-row: 2 / 3;}
.momacde {grid-column: 3 / 4; grid-row: 1 / 3; display:none;}

}


/* hoch 3 spalten */

@media all and (min-width: 900px) {
.moma {
grid-template-columns: 100%;
grid-template-rows: 4fr;
width: calc(33% - 16px);
float:left;
}

.momapic {grid-column: 1 / 2; grid-row: 1 / 2;}
.momatxt {grid-column: 1 / 2; grid-row: 2 / 3; min-height:300px;}
.momabut {grid-column: 1 / 2; grid-row: 3 / 4;}
.momacde {grid-column: 1 / 2; grid-row: 4 / 5; display:none;}

}


/* hoch 4 spalten */

@media all and (min-width: 1200px) {
.moma {
grid-template-columns: 100%;
grid-template-rows: 4fr;
width: calc(25% - 16px);
float:left;
}

.momapic {grid-column: 1 / 2; grid-row: 1 / 2;}
.momatxt {grid-column: 1 / 2; grid-row: 2 / 3; min-height:280px}
.momabut {grid-column: 1 / 2; grid-row: 3 / 4;}
.momacde {grid-column: 1 / 2; grid-row: 4 / 5; display:none;}

}


/* hoch 5 spalten */

@media all and (min-width: 1500px) {
.moma {
grid-template-columns: 100%;
grid-template-rows: 4fr;
width: calc(20% - 16px);
float:left;
}

.momapic {grid-column: 1 / 2; grid-row: 1 / 2;}
.momatxt {grid-column: 1 / 2; grid-row: 2 / 3; min-height:320px}
.momabut {grid-column: 1 / 2; grid-row: 3 / 4;}
.momacde {grid-column: 1 / 2; grid-row: 4 / 5; display:none;}

}



/* intersteps height */
@media all and (min-width: 1600px) {.momatxt {min-height:260px}}
@media all and (min-width: 1800px) {.momatxt {min-height:240px}}




/* =========================== intros bei Artikelseiten ======================== */

.vertical-divider{
clear: both;
position: relative;
}

.vertical-divider:after {
clear: both;
content: " ";
display: block;
height: 0;
visibility: hidden;
}

.vertical-divider .column:not(:first-child):after, .vertical-divider .columns:not(:first-child):after{
background: #DDDDDD;
bottom: 0;
content: " ";
margin-left: -10px;
position: absolute;
top: 0;
width: 1px;
}

/* Very simple grid for example */
.container { position: relative; width: 100%; margin: 20px auto; padding: 0; }

.container .column, .container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }

.container .one-third.column { width: calc(33.333% - 20px); }

.container .two-thirds.column { width: calc(66.666% - 20px); }


.container .one-third-res.column { width: calc(33.333% - 20px); }

.container .two-thirds-res.column { width: calc(66.666% - 20px); }



@media all and (max-width: 960px) {

.container .one-third.column { width: calc(33.333% - 20px); }

.container .two-thirds.column { width: calc(66.666% - 20px); }

.container .one-third-res.column { width: calc(33.333% - 20px); }

.container .two-thirds-res.column { width: calc(66.666% - 20px); }

}




@media all and (max-width: 560px) {

.container .one-third.column { width: calc(50% - 20px); }

.container .two-thirds.column { width: calc(50% - 20px); }

.container .one-third-res.column { width: calc(33.333% - 20px); display:none;}

.container .two-thirds-res.column { width: calc(100% - 20px); }

}




.nopad {padding-left:0;}







<style>
.herodouble {width:100%;}
.imgLL {width:33.333%; float:left}
.imgRR {width:66.666%; }



@media all and (max-width: 960px) {
.imgLL { display:none;}

.imgRR { width: 100%; }

}














/* ============== Grid für 4spalter =================================== */

.fourcol {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(0, 0fr);
grid-column-gap: 20px;
grid-row-gap: 20px;

margin-left:0%;
margin-right:0%;

border:0px solid #FF9F00;

}

/* === media screens von gross nach klein ===== */


@media only screen and (max-width: 1900px) {
         .fourcol {
         grid-template-columns: repeat(4, 1fr);
         grid-template-rows: repeat(0, 0fr);
         }

}



@media only screen and (max-width: 860px) {
         .fourcol {
         grid-template-columns: repeat(2, 1fr);
         grid-template-rows: repeat(0, 0fr);
         }
}


@media only screen and (max-width: 560px) {
         .fourcol {
         grid-template-columns: repeat(1, 1fr);
         grid-template-rows: repeat(0, 0fr);
         }
}