/* INFO: sections gap */
@media (max-width: 819.999px) {
    :root {
        --gap: 20px;
    }
}

@media (min-width: 820px) {
    :root {
        --gap: 40px;
    }
}
/* <<< */

hgroup {
    text-align: center;
}

hgroup,
article,
section {
    padding: 0 var(--gap);
}

main hgroup,
main article,
main section {
    margin: var(--gap) auto;
}

header > section,
footer > section {
    margin: 0 auto;
}

/* Tablet & Desktop */
@media (min-width: 660px) {
    hgroup {
        max-width: 660px;
    }
}

@media (min-width: 920px) {
    article {
        max-width: 920px;
    }
}

/* Desktop */
@media (min-width: 1360px) {
    section {
        max-width: 1360px;
    }
}

.cf { overflow: auto; }

.cf .fl { float: left; }

.cf .fr { float: right; }

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

.m20 {
    margin: 20px 0;
}

/* 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 */
    }

    .f2.reverse > div:first-child {
        order: 2;
    }

    .f2.reverse > div:last-child {
        order: 1;
    }

    .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;
	}
}


/* 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 */
    }
}
/* <<< */