/* ==========================================================
   Dusanglobal Design System
   Layout
   ========================================================== */

@layer layout {

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html,
    body {
        margin: 0;
        padding: 0;
    }

    img,
    picture,
    svg {
        display: block;
        max-width: 100%;
    }

    main {
        display: block;
    }

    /* -------------------------------------------------------
       Container
    ------------------------------------------------------- */

    .container {

        width: min(
            calc(100% - 2rem),
            var(--container-width)
        );

        margin-inline: auto;
    }

    /* -------------------------------------------------------
       Sections
    ------------------------------------------------------- */

    .section {

        padding-block: var(--space-10);

    }

    .section-sm {

        padding-block: var(--space-8);

    }

    .section-lg {

        padding-block: 10rem;

    }

    /* -------------------------------------------------------
       Flex helpers
    ------------------------------------------------------- */

    .flex {

        display: flex;

    }

    .flex-center {

        display: flex;

        align-items: center;

        justify-content: center;

    }

    .flex-between {

        display: flex;

        align-items: center;

        justify-content: space-between;

    }

    /* -------------------------------------------------------
       Grid
    ------------------------------------------------------- */

    .grid {

        display: grid;

        gap: var(--space-6);

    }

    .grid-2 {

        display: grid;

        gap: var(--space-7);

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

    .grid-3 {

        display: grid;

        gap: var(--space-6);

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

    }

    .grid-4 {

        display: grid;

        gap: var(--space-6);

        grid-template-columns:
            repeat(4, minmax(0, 1fr));

    }

    /* -------------------------------------------------------
       Responsive
    ------------------------------------------------------- */

    @media (max-width: 1024px) {

        .grid-4,
        .grid-3,
        .grid-2 {

            grid-template-columns: 1fr;

        }

    }

}