.grid:after{
    display: block;
    content:"";
    clear:both;
}

.grid.gap-10{ margin-left: -1%; }
.grid.gap-20{ margin-left: -2%; }
.grid.gap-30{ margin-left: -2.5%; }
.grid.gap-40{ margin-left: -3%; }
.grid.gap-50{ margin-left: -3.5%; }

/* Grid-Gap 0 */
.grid > .col{
    float: left;
    margin-left: 0;
}

.grid.bordered > .col{
    /* border: 1px solid var(--clr-secondary-400); */
    background-color: var(--clr-secondary-100);
    border-radius: 10px;
    overflow: hidden;
}

.grid.bordered > .col > .head{
    background-color: var(--clr-primary-400);
    color: var(--clr-neutral-000);
    padding: 10px 20px;
}

.grid.bordered > .col > .content{
    padding: 20px;
}

.grid.col-50-50 > .col{ width: 50%; }

.grid.col-60-40 > .col:nth-child(1), .grid.col-40-60 > .col:nth-child(2) { width: 60%; }
.grid.col-60-40 > .col:nth-child(2), .grid.col-40-60 > .col:nth-child(1) { width: 40%; }

.grid.col-70-30 > .col:nth-child(1), .grid.col-30-70 > .col:nth-child(2) { width: 70%; }
.grid.col-70-30 > .col:nth-child(2), .grid.col-30-70 > .col:nth-child(1) { width: 30%; }

.grid.col-80-20 > .col:nth-child(1), .grid.col-20-80 > .col:nth-child(2) { width: 80%; }
.grid.col-80-20 > .col:nth-child(2), .grid.col-20-80 > .col:nth-child(1) { width: 20%; }
/* ENDE Grid Gap 0 */

/* Grid Gap 10 */
.grid.gap-10 > .col{ margin-left: 1%; }

.grid.gap-10.col-50-50 > .col{ width: 49%; }

.grid.gap-10.col-60-40 > .col:nth-child(1), .grid.gap-10.col-40-60 > .col:nth-child(2){ width: 59%; }
.grid.gap-10.col-60-40 > .col:nth-child(2), .grid.gap-10.col-40-60 > .col:nth-child(1){ width: 39%; }

.grid.gap-10.col-70-30 > .col:nth-child(1), .grid.gap-10.col-30-70 > .col:nth-child(2){ width: 69%; }
.grid.gap-10.col-70-30 > .col:nth-child(2), .grid.gap-10.col-30-70 > .col:nth-child(1){ width: 29%; }

.grid.gap-10.col-80-20 > .col:nth-child(1), .grid.gap-10.col-20-80 > .col:nth-child(2){ width: 79%; }
.grid.gap-10.col-80-20 > .col:nth-child(2), .grid.gap-10.col-20-80 > .col:nth-child(1){ width: 19%; }
/* ENDE Grid Gap 10 */

/* Grid Gap 20 */
.grid.gap-20 > .col{ margin-left: 2%; }

.grid.gap-20.col-50-50 > .col{ width: 48%; }

.grid.gap-20.col-60-40 > .col:nth-child(1), .grid.gap-20.col-40-60 > .col:nth-child(2){ width: 58%; }
.grid.gap-20.col-60-40 > .col:nth-child(2), .grid.gap-20.col-40-60 > .col:nth-child(1){ width: 38%; }

.grid.gap-20.col-70-30 > .col:nth-child(1), .grid.gap-20.col-30-70 > .col:nth-child(2){ width: 68%; }
.grid.gap-20.col-70-30 > .col:nth-child(2), .grid.gap-20.col-30-70 > .col:nth-child(1){ width: 28%; }

.grid.gap-20.col-80-20 > .col:nth-child(1), .grid.gap-20.col-20-80 > .col:nth-child(2){ width: 78%; }
.grid.gap-20.col-80-20 > .col:nth-child(2), .grid.gap-20.col-20-80 > .col:nth-child(1){ width: 18%; }
/* ENDE Grid Gap 20 */

/* Grid-Gap 30*/
.grid.gap-30 > .col{ margin-left: 2.5%; }

.grid.gap-30.col-50-50 > .col{ width: 47.5%; }

.grid.gap-30.col-60-40 > .col:nth-child(1), .grid.gap-30.col-40-60 > .col:nth-child(2){ width: 57.5%; }
.grid.gap-30.col-60-40 > .col:nth-child(2), .grid.gap-30.col-40-60 > .col:nth-child(1){ width: 37.5%; }

.grid.gap-30.col-70-30 > .col:nth-child(1), .grid.gap-30.col-30-70 > .col:nth-child(2){ width: 67.5%; }
.grid.gap-30.col-70-30 > .col:nth-child(2), .grid.gap-30.col-30-70 > .col:nth-child(1){ width: 27.5%; }

.grid.gap-30.col-80-20 > .col:nth-child(1), .grid.gap-30.col-20-80 > .col:nth-child(2){ width: 77.5%; }
.grid.gap-30.col-80-20 > .col:nth-child(2), .grid.gap-30.col-20-80 > .col:nth-child(1){ width: 17.5%; }
/* ENDE Grid-Gap 30*/

/* Grid-Gap 40*/
.grid.gap-40 > .col{ margin-left: 3%; }

.grid.gap-40.col-50-50 > .col{ width: 47%; }

.grid.gap-40.col-60-40 > .col:nth-child(1), .grid.gap-40.col-40-60 > .col:nth-child(2){ width: 57%; }
.grid.gap-40.col-60-40 > .col:nth-child(2), .grid.gap-40.col-40-60 > .col:nth-child(1){ width: 37%; }

.grid.gap-40.col-70-30 > .col:nth-child(1), .grid.gap-40.col-30-70 > .col:nth-child(2){ width: 67%; }
.grid.gap-40.col-70-30 > .col:nth-child(2), .grid.gap-40.col-30-70 > .col:nth-child(1){ width: 27%; }

.grid.gap-40.col-80-20 > .col:nth-child(1), .grid.gap-40.col-20-80 > .col:nth-child(2){ width: 77%; }
.grid.gap-40.col-80-20 > .col:nth-child(2), .grid.gap-40.col-20-80 > .col:nth-child(1){ width: 17%; }
/* ENDE Grid-Gap 40*/

/* Grid-Gap 50*/
.grid.gap-50 > .col{ margin-left: 3.5%; }

.grid.gap-50.col-50-50 > .col{ width: 46.5%; }

.grid.gap-50.col-60-40 > .col:nth-child(1), .grid.gap-50.col-40-60 > .col:nth-child(2){ width: 56.5%; }
.grid.gap-50.col-60-40 > .col:nth-child(2), .grid.gap-50.col-40-60 > .col:nth-child(1){ width: 36.5%; }

.grid.gap-50.col-70-30 > .col:nth-child(1), .grid.gap-50.col-30-70 > .col:nth-child(2){ width: 66.5%; }
.grid.gap-50.col-70-30 > .col:nth-child(2), .grid.gap-50.col-30-70 > .col:nth-child(1){ width: 26.5%; }

.grid.gap-50.col-80-20 > .col:nth-child(1), .grid.gap-50.col-20-80 > .col:nth-child(2){ width: 76.5%; }
.grid.gap-50.col-80-20 > .col:nth-child(2), .grid.gap-50.col-20-80 > .col:nth-child(1){ width: 16.5%; }
/* ENDE Grid-Gap 50*/


@supports (display: grid) {
    .grid{
        display: grid;
        margin-left: 0 !important;
    }

    .grid:after{
        display: none;
    }

    .grid > .col{
        width: auto !important;
        margin-left: 0 !important;
    }

    .grid.gap-10{ grid-gap: 10px; }
    .grid.gap-20{ grid-gap: 20px; }
    .grid.gap-30{ grid-gap: 30px; }
    .grid.gap-40{ grid-gap: 40px; }
    .grid.gap-50{ grid-gap: 50px; }

    .grid.col-50-50{ grid-template-columns: 1fr 1fr; }
    .grid.col-60-40{ grid-template-columns: 6fr 4fr; }
    .grid.col-40-60{ grid-template-columns: 4fr 6fr; }
    .grid.col-70-30{ grid-template-columns: 7fr 3fr; }
    .grid.col-30-70{ grid-template-columns: 3fr 7fr; }
    .grid.col-80-20{ grid-template-columns: 8fr 2fr; }
    .grid.col-20-80{ grid-template-columns: 2fr 8fr; }
}