:root {
    --gap: 20px;
}

fieldset > div {
    padding: 10px;
}

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

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

@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 */
        width: calc((100% - var(--gap) * 2) / 3); /* INFO: Разделя контейнера на 3 равни части, отчитайки gap */
    }
}
/* <<< */