:root {
    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    /* !- widths */

    --wwg-width-2xs: 320px;
    --wwg-width-xs: 480px;
    --wwg-width-s: 770px;
    --wwg-width-m: 960px;
    --wwg-width-l: 1024px;
    --wwg-width-xl: 1288px;
    --wwg-width-2xl: 1440px;
    --wwg-width-full-content: 1920px;
    --wwg-width-full: none;

    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    /* !- spacings */

    --wwg-spacing-gutter: clamp(2rem, 6vw, 6rem);

    --wwg-spacing-none: 0rem;
    --wwg-spacing-2xs: 1rem;
    --wwg-spacing-xs: 3.2rem;
    --wwg-spacing-s: clamp(3rem, 3vw, 5rem);
    --wwg-spacing-m: clamp(5rem, 6vw, 10rem);
    --wwg-spacing-l: clamp(8rem, 6.573vw + 5.535rem, 15rem);
    --wwg-spacing-xl: clamp(10rem, 9.39vw + 6.479rem, 20rem);
    --wwg-spacing-2xl: clamp(8rem, 12.207vw + 7.423rem, 13.2rem);
}

.wwg-layout {
    --max-width-default: var(--wwg-width-l);
    --max-width: var(--max-width-default);

    max-width: var(--max-width);
    margin-right: auto;
    margin-left: auto;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- gutter */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.wwg-gutter {
    padding-right: var(--wwg-spacing-gutter);
    padding-left: var(--wwg-spacing-gutter);
}

.wwg-gutter-right {
    padding-right: var(--wwg-spacing-gutter);
}

.wwg-gutter-left {
    padding-left: var(--wwg-spacing-gutter);
}