#spacing {

    /*
    &[data-pattern="true"] {
        --first-color: rgba(255,255,255,0.01);
        --second-color: rgba(0,0,0,0.01);
        background-image: repeating-linear-gradient(-45deg, var(--first-color), var(--first-color) 5px, var(--second-color) 5px, var(--second-color) 10px);
    }
    */

    background-color: #111;

    &[data-theme="light"] {
        background-color: #fff;
    }

    &[data-desktop="xsmall"] {
        height: 32px;
    }

    &[data-desktop="small"] {
        height: 64px;
    }

    &[data-desktop="normal"] {
        height: 96px;
    }

    &[data-desktop="medium"] {
        height: 160px;
    }

    &[data-desktop="large"] {
        height: 200px;
    }

    &[data-desktop="xlarge"] {
        height: 260px;
    }

    @media only screen and (max-width: 980px) {
        /** Mobile Top **/
        &[data-mobile="xxsmall"] {
            height: 16px;
        }

        &[data-mobile="xsmall"] {
            height: 32px;
        }

        &[data-mobile="small"] {
            height: 64px;
        }

        &[data-mobile="normal"] {
            height: 96px;
        }

        &[data-mobile="medium"] {
            height: 160px;
        }

        &[data-mobile="large"] {
            height: 200px;
        }

        &[data-mobile="xlarge"], &[data-mobile="default"] {
            height: 260px;
        }

        &[data-mobile="xxlarge"] {
            height: 320px;
        }
    }
}