:root {
    --gap: 20px;
}

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

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

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

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

main hgroup,
main article,
main section {
    margin: var(--space) 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;
    }
}

/* g2*/
/* Mobile */
@media (max-width: 979.999px) {
    .g2 > div:not(:last-child) {
        margin-bottom: var(--space);
    }
}
/* Tablet & Desktop */
@media (min-width: 980px) {
    .g2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space);
    }
}
/* <<< */

/* g23*/
/* Mobile */
@media (max-width: 979.999px) {
    .g23 > div:not(:last-child) {
        margin-bottom: var(--space);
    }
}
/* Tablet & Desktop */
@media (min-width: 980px) {
    .g23 {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: var(--space);
    }
}
/* <<< */

/* g3*/
/* Mobile */
@media (max-width: 659.999px) {
    .g3 > div:not(:last-child) {
        margin-bottom: var(--space);
    }
}
/* Tablet & Desktop */
@media (min-width: 660px) {
    .g3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space);
    }
}
/* <<< */

/* g4*/
/* Mobile  */
@media (max-width: 479.999px) {
    .g4 > div:not(:last-child) {
        margin-bottom: var(--space);
    }
}
/* Mobile & Tablet */
@media (min-width: 480px) and (max-width: 979.999px) {
    .g4 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space);
    }
}
/* Desktop */
@media (min-width: 980px) {
    .g4 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space);
    }
}
/* <<< */