/*
 * LAYOUTS
 */


/* BOX LAYOUTS */
    .box {
        display: flex;
    }
    .box.nogap {
        gap: 0px;
    }
    .box.dense {
        gap: 4px;
    }
    .vbox {
        flex-direction: column;
        gap: var(--dimension-layout-gap);
    }
    .hbox {
        flex-direction: row;
        gap: var(--dimension-layout-gap);
    }
    .hbox.wrapped {
        flex-wrap: wrap;
    }


/* GRID LAYOUTS */
    .grid {
        display: grid;
        gap: var(--dimension-layout-gap);
    }
    .grid.wrapped {
        grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
    }

/* ADAPTIVE LAYOUTS */

    /* MOBILE */
    @media only screen and (max-width: 480px) {
        /* ... */
        main {
            padding: var(--dimension-layout-gap);
        }
        footer {
            padding-top: var(--dimension-layout-gap);
            padding-bottom: var(--dimension-layout-gap);
        }
        #footer__container {
            padding: var(--dimension-layout-gap);
        }
    }

    /* TABLET PORTRAIT */
    @media only screen and (min-width: 481px) and (max-width: 768px) {
        /* ... */
        main {
            padding: var(--dimension-layout-gap);
        }
        footer {
            padding-top: var(--dimension-layout-gap);
            padding-bottom: var(--dimension-layout-gap);
        }
        #footer__container {
            padding: var(--dimension-layout-gap);
        }
    }

    /* TABLET LANDSCAPE */
    @media only screen and (min-width: 769px) and (max-width: 1024px) {
        /* ... */
        main {
            padding: var(--dimension-layout-gap);
        }
        footer {
            padding-top: var(--dimension-layout-gap);
            padding-bottom: var(--dimension-layout-gap);
        }
        #footer__container {
            padding: var(--dimension-layout-gap);
        }
    }

    /* LAPTOP */
    @media only screen and (min-width: 1025px) and (max-width: 1600px) {
        /* ... */
        main {
            width: var(--dimension-max-text-container);
            margin: 0 auto;
        }
        footer {
            padding-top: var(--dimension-layout-gap);
            padding-bottom: var(--dimension-layout-gap);
        }
        #footer__container {
            width: var(--dimension-max-text-container);
            margin: 0 auto;
        }
    }

    /* DESKTOP */
    @media only screen and (min-width: 1601px) {
        /* ... */
        main {
            width: var(--dimension-max-text-container);
            margin: 0 auto;
        }
        footer {
            padding-top: var(--dimension-layout-gap);
            padding-bottom: var(--dimension-layout-gap);
        }
        #footer__container {
            width: var(--dimension-max-text-container);
            margin: 0 auto;
        }
    }