/* INFO: f2 */
@media (max-width: 819.999px) {
    .f2 > div:not(:last-child) {
        margin-bottom: var(--gap);
    }
}

@media (min-width: 820px) {
    .f2 {
        display: flex;
        flex-wrap: wrap; /* INFO: Позволява елементите да се пренасят на нов ред при малка ширина */
        justify-content: center;
        gap: var(--gap); /* INFO: Разстояние между елементите */
    }

    .f2 > div {
        box-sizing: border-box; /* INFO: За да се избегне преразмеряване от padding */
        flex: 1;
    }

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

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

    .f2 > div {
        width: calc((100% - var(--gap)) / 2); /* INFO: Разделя контейнера на 2 равни части, отчитайки gap */
    }
}
/* <<< */

/* INFO: f3, f32 */
@media (max-width: 499.999px) {
    .f32 > div:not(:last-child) {
        margin-bottom: var(--gap);
    }
}

@media (max-width: 659.999px) {
    .f3 > div:not(:last-child) {
        margin-bottom: var(--gap);
    }
}

@media (min-width: 500px) {
    .f32 {
        display: flex;
        flex-wrap: wrap; /* INFO: Позволява елементите да се пренасят на нов ред при малка ширина */
        justify-content: center;
        gap: var(--gap); /* INFO: Разстояние между елементите */
    }

    .f32 > div {
        box-sizing: border-box; /* INFO: За да се избегне преразмеряване от padding */
        flex: 1;
    }

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

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

@media (min-width: 660px) {
    .f3 {
        display: flex;
        flex-wrap: wrap; /* INFO: Позволява елементите да се пренасят на нов ред при малка ширина */
        justify-content: center;
        gap: var(--gap); /* INFO: Разстояние между елементите */
    }

    .f3 > div {
        box-sizing: border-box; /* INFO: За да се избегне преразмеряване от padding */
        flex: 1;
    }

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

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

    .f3 > div {
        width: calc((100% - var(--gap) * 2) / 3); /* INFO: Разделя контейнера на 3 равни части, отчитайки gap */
    }

    .f3 > div.c2 {
        width: calc(2 * (100% - var(--gap) * 2) / 3 + var(--gap)); /* Разделя контейнера на 3 равни части, отчитайки gap и обединява 2 от тях */
    }
}

@media (min-width: 500px) and (max-width: 979.999px) {
    .f32 > div {
        width: calc((100% - var(--gap)) / 2); /* INFO: Разделя контейнера на 2 равни части, отчитайки gap */
    }
}

@media (min-width: 980px) {
    .f32 > div {
        width: calc((100% - var(--gap) * 2) / 3); /* INFO: Разделя контейнера на 3 равни части, отчитайки gap */
    }
}
/* <<< */

/* INFO: f4, f43 */
@media (max-width: 499.999px) {
    .f43 > div:not(:last-child) {
        margin-bottom: var(--gap);
    }

    .f4 > div:not(:last-child) {
        margin-bottom: var(--gap);
    }
}

@media (min-width: 500px) {
    .f4,
    .f43 {
        display: flex;
        flex-wrap: wrap; /* INFO: Позволява елементите да се пренасят на нов ред при малка ширина */
        justify-content: center;
        gap: var(--gap); /* INFO: Разстояние между елементите */
    }

    .f4 > div,
    .f43 > div {
        box-sizing: border-box; /* INFO: За да се избегне преразмеряване от padding */
    }

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

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

@media (min-width: 500px) and (max-width: 979.999px) {
    .f4 > div {
        width: calc((100% - var(--gap)) / 2); /* INFO: Разделя контейнера на 2 равни части, отчитайки gap */
    }
}

@media (min-width: 980px) {
    .f4 > div {
        width: calc((100% - var(--gap) * 3) / 4); /* INFO: Разделя контейнера на 4 равни части, отчитайки gap */
    }

    .f4 > div.c2 {
        width: calc(2 * (100% - var(--gap) * 3) / 4 + var(--gap)); /* Разделя контейнера на 4 равни части, отчитайки gap и обединява 2 от тях */
    }

    .f4 > div.c3 {
            width: calc(3 * (100% - var(--gap) * 3) / 4 + var(--gap) * 2); /* Разделя контейнера на 4 равни части, отчитайки gap и обединява 3 от тях */
    }
}

@media (min-width: 500px) and (max-width: 659.999px) {
    .f43 > div {
        width: calc((100% - var(--gap)) / 2); /* INFO: Разделя контейнера на 2 равни части, отчитайки gap */
    }
}

@media (min-width: 660px) and (max-width: 979.999px) {
    .f43 > div {
        width: calc((100% - var(--gap) * 2) / 3); /* INFO: Разделя контейнера на 3 равни части, отчитайки gap */
    }
}

@media (min-width: 980px) {
    .f43 > div {
        width: calc((100% - var(--gap) * 3) / 4); /* INFO: Разделя контейнера на 4 равни части, отчитайки gap */
    }
}
/* <<< */

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

.cf .fl {
    float: left;
}

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