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

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

header,
footer,
hgroup,
article,
section {
    box-sizing: border-box;
}

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