hgroup,
section {
    box-sizing: border-box;
}

main hgroup {
    padding: 20px;
}

.cf { overflow: auto; }

.cf .fl { float: left; }

.cf .fr { float: right; }

/* Mobile & Tablet */
@media (max-width: 639.999px) {
    .f32 > div:not(:last-child) {
        margin-bottom: 40px;
    }
}

@media (max-width: 799.999px) {
    header section,
    footer section {
        padding: 0 20px;
    }

	main section {
	    padding: 20px;
	}

    .f2 > div:not(:last-child),
    .f3 > div:not(:last-child) {
        margin-bottom: 40px;
    }
}

/* Tablet & Desktop */
@media (min-width: 640px) {
	main hgroup {
		max-width: 640px;
		margin: 0 auto;
	}

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

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

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

    /* INFO: Подравнява последния div (бунотинте) в долната част на реда */
    div.ab > div:last-child {
        margin-top: auto;
    }
}

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

@media (min-width: 800px) {
    header section,
    footer section {
        padding: 0 40px;
    }

	main section {
	    padding: 20px 40px;
	}

	/* INFO: Подрежда елементите един до друг */
    .f2,
    .f3 {
        display: flex;
        flex-wrap: wrap; /* INFO: Позволява елементите да се пренасят на нов ред при малка ширина */
        justify-content: center;
        gap: 40px; /* INFO: Разстояние между елементите */
    }

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

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

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

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

@media (min-width: 1360px) {
	section {
        max-width: 1360px;
        margin: 0 auto;
	}
}