<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-padding-top-xxs u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-padding-top-xxs
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-padding-top-xs u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-padding-top-xs
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-padding-top-s u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-padding-top-s
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-padding-top-m u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-padding-top-m
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-padding-top-l u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-padding-top-l
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-padding-top-xl u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-padding-top-xl
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-padding-top-xxl u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-padding-top-xxl
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-padding-right-xxs u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-padding-right-xxs
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-padding-right-xs u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-padding-right-xs
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-padding-right-s u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-padding-right-s
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-padding-right-m u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-padding-right-m
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-padding-right-l u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-padding-right-l
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-padding-right-xl u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-padding-right-xl
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-padding-right-xxl u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-padding-right-xxl
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-padding-bottom-xxs u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-padding-bottom-xxs
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-padding-bottom-xs u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-padding-bottom-xs
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-padding-bottom-s u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-padding-bottom-s
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-padding-bottom-m u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-padding-bottom-m
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-padding-bottom-l u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-padding-bottom-l
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-padding-bottom-xl u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-padding-bottom-xl
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-padding-bottom-xxl u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-padding-bottom-xxl
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-padding-left-xxs u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-padding-left-xxs
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-padding-left-xs u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-padding-left-xs
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-padding-left-s u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-padding-left-s
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-padding-left-m u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-padding-left-m
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-padding-left-l u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-padding-left-l
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-padding-left-xl u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-padding-left-xl
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-padding-left-xxl u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-padding-left-xxl
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-padding-all-xxs u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-padding-all-xxs
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-padding-all-xs u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-padding-all-xs
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-padding-all-s u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-padding-all-s
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-padding-all-m u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-padding-all-m
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-padding-all-l u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-padding-all-l
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-padding-all-xl u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-padding-all-xl
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-padding-all-xxl u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-padding-all-xxl
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-margin-top-xxs u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-margin-top-xxs
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-margin-top-xs u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-margin-top-xs
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-margin-top-s u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-margin-top-s
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-margin-top-m u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-margin-top-m
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-margin-top-l u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-margin-top-l
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-margin-top-xl u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-margin-top-xl
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-margin-top-xxl u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-margin-top-xxl
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-margin-right-xxs u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-margin-right-xxs
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-margin-right-xs u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-margin-right-xs
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-margin-right-s u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-margin-right-s
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-margin-right-m u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-margin-right-m
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-margin-right-l u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-margin-right-l
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-margin-right-xl u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-margin-right-xl
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-margin-right-xxl u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-margin-right-xxl
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-margin-bottom-xxs u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-margin-bottom-xxs
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-margin-bottom-xs u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-margin-bottom-xs
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-margin-bottom-s u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-margin-bottom-s
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-margin-bottom-m u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-margin-bottom-m
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-margin-bottom-l u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-margin-bottom-l
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-margin-bottom-xl u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-margin-bottom-xl
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-margin-bottom-xxl u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-margin-bottom-xxl
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-margin-left-xxs u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-margin-left-xxs
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-margin-left-xs u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-margin-left-xs
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-margin-left-s u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-margin-left-s
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-margin-left-m u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-margin-left-m
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-margin-left-l u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-margin-left-l
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-margin-left-xl u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-margin-left-xl
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-margin-left-xxl u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-margin-left-xxl
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-margin-all-xxs u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-margin-all-xxs
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-margin-all-xs u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-margin-all-xs
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-margin-all-s u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-margin-all-s
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-margin-all-m u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-margin-all-m
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-margin-all-l u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-margin-all-l
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-margin-all-xl u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-margin-all-xl
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-layoutCenter u-margin-all-xxl u-background-teal-50">
        <p class="u-layoutCenter u-background-95 u-color-white u-border-all-xxs">
            u-margin-all-xxl
        </p>
    </div>
</div>
  • Content:
    /** @define utilities; */
    
    :root {
      --Spacing-unit-fixed: 0.4rem;
    }
    
    /* All */
    
    .u-padding-all-none { padding: 0 !important; }
    .u-padding-all-xxs { padding: var(--Spacing-unit-fixed) !important; }
    .u-padding-all-xs { padding: calc(2 * var(--Spacing-unit-fixed)) !important; }
    .u-padding-all-s { padding: calc(4 * var(--Spacing-unit-fixed)) !important; }
    .u-padding-all-m { padding: calc(5 * var(--Spacing-unit-fixed)) !important; }
    .u-padding-all-l { padding: calc(6 * var(--Spacing-unit-fixed)) !important; }
    .u-padding-all-xl { padding: calc(8 * var(--Spacing-unit-fixed)) !important; }
    .u-padding-all-xxl { padding: calc(10 * var(--Spacing-unit-fixed)) !important; }
    
    .u-margin-all-none { margin: 0 !important; }
    .u-margin-all-xxs { margin: var(--Spacing-unit-fixed) !important; }
    .u-margin-all-xs { margin: calc(2 * var(--Spacing-unit-fixed)) !important; }
    .u-margin-all-s { margin: calc(4 * var(--Spacing-unit-fixed)) !important; }
    .u-margin-all-m { margin: calc(5 * var(--Spacing-unit-fixed)) !important; }
    .u-margin-all-l { margin: calc(6 * var(--Spacing-unit-fixed)) !important; }
    .u-margin-all-xl { margin: calc(8 * var(--Spacing-unit-fixed)) !important; }
    .u-margin-all-xxl { margin: calc(10 * var(--Spacing-unit-fixed)) !important; }
    
    /* Top */
    
    .u-padding-top-none { padding-top: 0 !important; }
    .u-padding-top-xxs { padding-top: var(--Spacing-unit-fixed) !important; }
    .u-padding-top-xs { padding-top: calc(2 * var(--Spacing-unit-fixed)) !important; }
    .u-padding-top-s { padding-top: calc(4 * var(--Spacing-unit-fixed)) !important; }
    .u-padding-top-m { padding-top: calc(5 * var(--Spacing-unit-fixed)) !important; }
    .u-padding-top-l { padding-top: calc(6 * var(--Spacing-unit-fixed)) !important; }
    .u-padding-top-xl { padding-top: calc(8 * var(--Spacing-unit-fixed)) !important; }
    .u-padding-top-xxl { padding-top: calc(10 * var(--Spacing-unit-fixed)) !important; }
    
    .u-margin-top-none { margin-top: 0 !important; }
    .u-margin-top-xxs { margin-top: var(--Spacing-unit-fixed) !important; }
    .u-margin-top-xs { margin-top: calc(2 * var(--Spacing-unit-fixed)) !important; }
    .u-margin-top-s { margin-top: calc(4 * var(--Spacing-unit-fixed)) !important; }
    .u-margin-top-m { margin-top: calc(5 * var(--Spacing-unit-fixed)) !important; }
    .u-margin-top-l { margin-top: calc(6 * var(--Spacing-unit-fixed)) !important; }
    .u-margin-top-xl { margin-top: calc(8 * var(--Spacing-unit-fixed)) !important; }
    .u-margin-top-xxl { margin-top: calc(10 * var(--Spacing-unit-fixed)) !important; }
    
    /* Bottom */
    
    .u-padding-bottom-none { padding-bottom: 0 !important; }
    .u-padding-bottom-xxs { padding-bottom: var(--Spacing-unit-fixed) !important; }
    .u-padding-bottom-xs { padding-bottom: calc(2 * var(--Spacing-unit-fixed)) !important; }
    .u-padding-bottom-s { padding-bottom: calc(4 * var(--Spacing-unit-fixed)) !important; }
    .u-padding-bottom-m { padding-bottom: calc(5 * var(--Spacing-unit-fixed)) !important; }
    .u-padding-bottom-l { padding-bottom: calc(6 * var(--Spacing-unit-fixed)) !important; }
    .u-padding-bottom-xl { padding-bottom: calc(8 * var(--Spacing-unit-fixed)) !important; }
    .u-padding-bottom-xxl { padding-bottom: calc(10 * var(--Spacing-unit-fixed)) !important; }
    
    .u-margin-bottom-none { margin-bottom: 0 !important; }
    .u-margin-bottom-xxs { margin-bottom: var(--Spacing-unit-fixed) !important; }
    .u-margin-bottom-xs { margin-bottom: calc(2 * var(--Spacing-unit-fixed)) !important; }
    .u-margin-bottom-s { margin-bottom: calc(4 * var(--Spacing-unit-fixed)) !important; }
    .u-margin-bottom-m { margin-bottom: calc(5 * var(--Spacing-unit-fixed)) !important; }
    .u-margin-bottom-l { margin-bottom: calc(6 * var(--Spacing-unit-fixed)) !important; }
    .u-margin-bottom-xl { margin-bottom: calc(8 * var(--Spacing-unit-fixed)) !important; }
    .u-margin-bottom-xxl { margin-bottom: calc(10 * var(--Spacing-unit-fixed)) !important; }
    
    /* Left */
    
    .u-padding-left-none { padding-left: 0 !important; }
    .u-padding-left-xxs { padding-left: var(--Spacing-unit-fixed) !important; }
    .u-padding-left-xs { padding-left: calc(2 * var(--Spacing-unit-fixed)) !important; }
    .u-padding-left-s { padding-left: calc(4 * var(--Spacing-unit-fixed)) !important; }
    .u-padding-left-m { padding-left: calc(5 * var(--Spacing-unit-fixed)) !important; }
    .u-padding-left-l { padding-left: calc(6 * var(--Spacing-unit-fixed)) !important; }
    .u-padding-left-xl { padding-left: calc(8 * var(--Spacing-unit-fixed)) !important; }
    .u-padding-left-xxl { padding-left: calc(10 * var(--Spacing-unit-fixed)) !important; }
    
    .u-margin-left-none { margin-left: 0 !important; }
    .u-margin-left-xxs { margin-left: var(--Spacing-unit-fixed) !important; }
    .u-margin-left-xs { margin-left: calc(2 * var(--Spacing-unit-fixed)) !important; }
    .u-margin-left-s { margin-left: calc(4 * var(--Spacing-unit-fixed)) !important; }
    .u-margin-left-m { margin-left: calc(5 * var(--Spacing-unit-fixed)) !important; }
    .u-margin-left-l { margin-left: calc(6 * var(--Spacing-unit-fixed)) !important; }
    .u-margin-left-xl { margin-left: calc(8 * var(--Spacing-unit-fixed)) !important; }
    .u-margin-left-xxl { margin-left: calc(10 * var(--Spacing-unit-fixed)) !important; }
    
    /* Right */
    
    .u-padding-right-none { padding-right: 0 !important; }
    .u-padding-right-xxs { padding-right: var(--Spacing-unit-fixed) !important; }
    .u-padding-right-xs { padding-right: calc(2 * var(--Spacing-unit-fixed)) !important; }
    .u-padding-right-s { padding-right: calc(4 * var(--Spacing-unit-fixed)) !important; }
    .u-padding-right-m { padding-right: calc(5 * var(--Spacing-unit-fixed)) !important; }
    .u-padding-right-l { padding-right: calc(6 * var(--Spacing-unit-fixed)) !important; }
    .u-padding-right-xl { padding-right: calc(8 * var(--Spacing-unit-fixed)) !important; }
    .u-padding-right-xxl { padding-right: calc(10 * var(--Spacing-unit-fixed)) !important; }
    
    .u-margin-right-none { margin-right: 0 !important; }
    .u-margin-right-xxs { margin-right: var(--Spacing-unit-fixed) !important; }
    .u-margin-right-xs { margin-right: calc(2 * var(--Spacing-unit-fixed)) !important; }
    .u-margin-right-s { margin-right: calc(4 * var(--Spacing-unit-fixed)) !important; }
    .u-margin-right-m { margin-right: calc(5 * var(--Spacing-unit-fixed)) !important; }
    .u-margin-right-l { margin-right: calc(6 * var(--Spacing-unit-fixed)) !important; }
    .u-margin-right-xl { margin-right: calc(8 * var(--Spacing-unit-fixed)) !important; }
    .u-margin-right-xxl { margin-right: calc(10 * var(--Spacing-unit-fixed)) !important; }
    
  • URL: /components/raw/space/fixed.css
  • Filesystem Path: src/utils/space/fixed.css
  • Size: 6.4 KB
  • Content:
    @import "./fixed.css";
    @import "./relative.css";
    @import "./responsive.css";
    
  • URL: /components/raw/space/index.css
  • Filesystem Path: src/utils/space/index.css
  • Size: 77 Bytes
  • Content:
    /** @define utilities; */
    
    .u-padding-r-all { padding: 1em !important; }
    .u-margin-r-all { margin: 1em !important; }
    
    .u-padding-r-top { padding-top: 1em !important; }
    .u-margin-r-top { margin-top: 1em !important; }
    
    .u-padding-r-bottom { padding-bottom: 1em !important; }
    .u-margin-r-bottom { margin-bottom: 1em !important; }
    
    .u-padding-r-left { padding-left: 1em !important; }
    .u-margin-r-left { margin-left: 1em !important; }
    
    .u-padding-r-right { padding-right: 1em !important; }
    .u-margin-r-right { margin-right: 1em !important; }
    
    /* Font size reset for inner elements */
    
    /* postcss-bem-linter: ignore */
    
    .u-padding-r-all > *,
    .u-margin-r-all > *,
    .u-padding-r-top > *,
    .u-margin-r-top > *,
    .u-padding-r-bottom > *,
    .u-margin-r-bottom > *,
    .u-padding-r-left > *,
    .u-margin-r-left > *,
    .u-padding-r-right > *,
    .u-margin-r-right > * {
      font-size: medium;
    }
    
  • URL: /components/raw/space/relative.css
  • Filesystem Path: src/utils/space/relative.css
  • Size: 865 Bytes
  • Content:
    @media (--xs-viewport) {
    
      .u-xs-padding-all-none { padding: 0 !important; }
      .u-xs-padding-top-none { padding-top: 0 !important; }
      .u-xs-padding-bottom-none { padding-bottom: 0 !important; }
      .u-xs-padding-left-none { padding-left: 0 !important; }
      .u-xs-padding-right-none { padding-right: 0 !important; }
    
      .u-xs-margin-all-none { margin: 0 !important; }
      .u-xs-margin-top-none { margin-top: 0 !important; }
      .u-xs-margin-bottom-none { margin-bottom: 0 !important; }
      .u-xs-margin-left-none { margin-left: 0 !important; }
      .u-xs-margin-right-none { margin-right: 0 !important; }
    
    }
    
  • URL: /components/raw/space/responsive.css
  • Filesystem Path: src/utils/space/responsive.css
  • Size: 596 Bytes

There are no notes for this item.