/* === GLOBAL === */

body {
    margin: 0;
    font-size: 16px;
    background-color: #fff;
}

* {
    box-sizing: border-box;
}


/* === GRID-SYSTEM === */

.container {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

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

[class*='col-'] {
    float: left;
    min-height: 1px;
    padding: .2rem;
}

.col-1 {
    width: 12.5%;
}

.col-2 {
    width: 25%;
}

.col-3 {
    width: 37.5%;
}

.col-4 {
    width: 50%;
}

.col-5 {
    width: 62.5%;
}

.col-6 {
    width: 75%;
}

.col-7 {
    width: 87.5%;
}

.col-8 {
    width: 100%;
}

.col-1_3 {
    width: 33.333%;
}


/* === GRID-SICHTBARKEIT === */


/* .grid, .grid * {
  border: 1px solid #2E9AFE;
  color: #fff;
}

.grid p {
  background-color: #2E9AFE;
  padding: .5rem;
  text-align: center;
  border: none;
}

[class*='col-'] {
  background-color: #81DAF5;
} */


/* === GRID MEDIA-QUERIES === */

@media (max-width: 1600px) {
    .col-1 {
        width: 25%;
    }
    .col-7 {
        width: 75%;
    }
}

@media (max-width: 1366px) {
    .col-4 {
        width: 50%;
    }
}

@media (max-width: 1024px) {
    .col-4 {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .col-1 {
        width: 50%;
    }
    .col-2 {
        width: 100%;
    }
    .col-3 {
        width: 100%;
    }
    .col-4 {
        width: 100%;
    }
    .col-5 {
        width: 100%;
    }
    .col-6 {
        width: 100%;
    }
    .col-7 {
        width: 50%;
    }
    .col-1_3 {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .col-1 {
        width: 100%;
    }
    .col-7 {
        width: 100%;
    }
}