/* ========== DESKTOP ========== */
@media only screen and (min-width: 769px) {
    .grid {
        display: flex;
        flex-wrap: nowrap;
    }
    .intro-grid {
        display: flex;
        flex-wrap: nowrap;
    }
    .col-12 {
        width: 98%;
        padding: 1%;
    }
    .col-11 {
        width: 89.3%;
        padding: 1%;
    }
    .col-10 {
        width: 81%;
        padding: 1%;
    }
    .col-9 {
        width: 72.7%;
        padding: 1%;
    }
    .col-8 {
        width: 64.4%;
        padding: 1%;
    }
    .col-7 {
        width: 56.1%;
        padding: 1%;
    }
    .col-6 {
        width: 48%;
        padding: 1%;
    }
    .col-5 {
        width: 39.5%;
        padding: 1%;
    }
    .col-4 {
        width: 31.2%;
        padding: 1%;
    }
    .col-3 {
        width: 22.9%;
        padding: 1%;
    }
    .col-2 {
        width: 14.6%;
        padding: 1%;
    }
    .col-1 {
        width: 6.3%;
        padding: 1%;
    }
}

/* ========== MOBILE ========== */
@media only screen and (max-width: 768px) {
    .grid {
        display: flex;
        flex-wrap: wrap;
    }
    .intro-grid {
        display: flex;
        flex-wrap: nowrap;
    }
    .col-12 {
        width: 100%;
        padding: 1%;
    }
    .col-11 {
        width: 100%;
        padding: 1%;
    }
    .col-10 {
        width: 100%;
        padding: 1%;
    }
    .col-9 {
        width: 100%;
        padding: 1%;
    }
    .col-8 {
        width: 100%;
        padding: 1%;
    }
    .col-7 {
        width: 100%;
        padding: 1%;
    }
    .col-6 {
        width: 100%;
        padding: 1%;
    }
    .col-5 {
        width: 100%;
        padding: 1%;
    }
    .col-4 {
        width: 100%;
        padding: 1%;
    }
    .col-3 {
        width: 100%;
        padding: 1%;
    }
    .col-2 {
        width: 48%;
        padding: 1%;
    }
    .col-1 {
        width: 50%;
        padding: 1%;
    }
}