.f {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap);
}

/* INFO: float */
.cf::after {
    content: '';
    display: table;
    clear: both;
}

.cf .fl {
    float: left;
}

.cf .fr {
    float: right;
}
/* <<< */

.p1,
.p12,
.p2,
.p21 {
    box-sizing: border-box;
}

.p1,
.p12 {
    padding: 10px;
}

.p1 > div {
    padding: 10px;
}

.p12 > div {
    padding: 20px;
}

.p2,
.p21 {
    padding: 20px;
}

.p2 > div {
    padding: 20px;
}

.p21 > div {
    padding: 10px;
}

/* INFO: 
    flex: 1; Прави елементите равни по ширина 
    flex-wrap: wrap; /* INFO: Позволява елементите да се пренасят на нов ред при по-малка ширина 
    justify-content: center; Подравнява елементите в центъра на контейнера
    flex-direction: column; Ориентира елементите в колона и позволява на последния елемент да се подравни в дъното на контейнера -> (div:last-child { margin-top: auto; })
*/

@media (min-width: 980px) {
    .f2 {
        display: flex;
    }

    .f2 > div {
        flex: 1;
    }

    /* INFO: Подравнява последния div (бунотинте) в долната част на реда */
    .f2 div.ab { /* INFO: ab = align bottom */
        display: flex;
        flex-direction: column;
    }

    .f2 div.ab > div:last-child {
        margin-top: auto;
    }
    /* <<< */
}

@media (min-width: 660px) {
    .f3 {
        display: flex;
    }

    .f3 > div {
        flex: 1;
    }

    .f3 > div.ab { 
        display: flex;
        flex-direction: column;
    }

    .f3 > div.ab > div:last-child {
        margin-top: auto;
    }

    .f3 > div.c2 {
        flex: 0 0 66.666666667%;
    }
}

@media (min-width: 480px) {
    .f4 {
        display: flex;
    }
    
    .f4 div.ab { 
        display: flex;
        flex-direction: column;
    }

    .f4 div.ab > div:last-child {
        margin-top: auto;
    }
}

@media (min-width: 480px) and (max-width: 979.999px) {
    .f4 {
        flex-wrap: wrap;
        justify-content: center;
    }

    .f4 > div {
        flex: 0 0 50%;
    }

    .f4 > div.c2 {
        flex: 0 0 100%;
    }
}

@media (min-width: 980px) {
    .f4 > div {
        flex: 1;
    }
    
    .f4 > div.c2 {
        flex: 0 0 50%;
    }

    .f4 > div.c3 {
        flex: 0 0 75%;
    }
}

@media (min-width: 540px) {
    .f32 {
        display: flex;
    }
    
    .f32 div.ab { 
        display: flex;
        flex-direction: column;
    }

    .f32 div.ab > div:last-child {
        margin-top: auto;
    }
}

@media (min-width: 540px) and (max-width: 899.999px) {
    .f32 {
        flex-wrap: wrap;
        justify-content: center;
    }

    .f32 > div {
        flex: 0 0 50%;
    }
}

@media (min-width: 900px) {
    .f32 > div {
        flex: 1;
    }
}

@media (min-width: 480px) {
    .f43 {
        display: flex;
    }
    
    .f43 div.ab { 
        display: flex;
        flex-direction: column;
    }

    .f43 div.ab > div:last-child {
        margin-top: auto;
    }
}

@media (min-width: 480px) and (max-width: 979.999px) {
    .f43 {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (min-width: 480px) and (max-width: 659.999px) {
    .f43 > div {
        flex: 0 0 50%;
    }
}

@media (min-width: 660px) and (max-width: 979.999px) {
    .f43 > div {
        flex: 0 0 33.33333333%;
    }
}

@media (min-width: 980px) {
    .f43 > div {
        flex: 1;
    }
}