<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-text-r-xxs u-padding-r-top u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xxs u-padding-r-top
        </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-text-r-xs u-padding-r-top u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xs u-padding-r-top
        </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-text-r-s u-padding-r-top u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-s u-padding-r-top
        </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-text-r-m u-padding-r-top u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-m u-padding-r-top
        </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-text-r-l u-padding-r-top u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-l u-padding-r-top
        </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-text-r-xl u-padding-r-top u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xl u-padding-r-top
        </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-text-r-xxl u-padding-r-top u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xxl u-padding-r-top
        </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-text-r-xxs u-padding-r-right u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xxs u-padding-r-right
        </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-text-r-xs u-padding-r-right u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xs u-padding-r-right
        </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-text-r-s u-padding-r-right u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-s u-padding-r-right
        </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-text-r-m u-padding-r-right u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-m u-padding-r-right
        </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-text-r-l u-padding-r-right u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-l u-padding-r-right
        </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-text-r-xl u-padding-r-right u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xl u-padding-r-right
        </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-text-r-xxl u-padding-r-right u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xxl u-padding-r-right
        </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-text-r-xxs u-padding-r-bottom u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xxs u-padding-r-bottom
        </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-text-r-xs u-padding-r-bottom u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xs u-padding-r-bottom
        </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-text-r-s u-padding-r-bottom u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-s u-padding-r-bottom
        </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-text-r-m u-padding-r-bottom u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-m u-padding-r-bottom
        </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-text-r-l u-padding-r-bottom u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-l u-padding-r-bottom
        </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-text-r-xl u-padding-r-bottom u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xl u-padding-r-bottom
        </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-text-r-xxl u-padding-r-bottom u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xxl u-padding-r-bottom
        </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-text-r-xxs u-padding-r-left u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xxs u-padding-r-left
        </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-text-r-xs u-padding-r-left u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xs u-padding-r-left
        </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-text-r-s u-padding-r-left u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-s u-padding-r-left
        </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-text-r-m u-padding-r-left u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-m u-padding-r-left
        </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-text-r-l u-padding-r-left u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-l u-padding-r-left
        </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-text-r-xl u-padding-r-left u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xl u-padding-r-left
        </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-text-r-xxl u-padding-r-left u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xxl u-padding-r-left
        </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-text-r-xxs u-padding-r-all u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xxs u-padding-r-all
        </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-text-r-xs u-padding-r-all u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xs u-padding-r-all
        </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-text-r-s u-padding-r-all u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-s u-padding-r-all
        </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-text-r-m u-padding-r-all u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-m u-padding-r-all
        </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-text-r-l u-padding-r-all u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-l u-padding-r-all
        </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-text-r-xl u-padding-r-all u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xl u-padding-r-all
        </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-text-r-xxl u-padding-r-all u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xxl u-padding-r-all
        </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-text-r-xxs u-margin-r-top u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xxs u-margin-r-top
        </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-text-r-xs u-margin-r-top u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xs u-margin-r-top
        </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-text-r-s u-margin-r-top u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-s u-margin-r-top
        </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-text-r-m u-margin-r-top u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-m u-margin-r-top
        </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-text-r-l u-margin-r-top u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-l u-margin-r-top
        </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-text-r-xl u-margin-r-top u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xl u-margin-r-top
        </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-text-r-xxl u-margin-r-top u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xxl u-margin-r-top
        </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-text-r-xxs u-margin-r-right u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xxs u-margin-r-right
        </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-text-r-xs u-margin-r-right u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xs u-margin-r-right
        </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-text-r-s u-margin-r-right u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-s u-margin-r-right
        </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-text-r-m u-margin-r-right u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-m u-margin-r-right
        </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-text-r-l u-margin-r-right u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-l u-margin-r-right
        </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-text-r-xl u-margin-r-right u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xl u-margin-r-right
        </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-text-r-xxl u-margin-r-right u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xxl u-margin-r-right
        </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-text-r-xxs u-margin-r-bottom u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xxs u-margin-r-bottom
        </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-text-r-xs u-margin-r-bottom u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xs u-margin-r-bottom
        </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-text-r-s u-margin-r-bottom u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-s u-margin-r-bottom
        </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-text-r-m u-margin-r-bottom u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-m u-margin-r-bottom
        </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-text-r-l u-margin-r-bottom u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-l u-margin-r-bottom
        </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-text-r-xl u-margin-r-bottom u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xl u-margin-r-bottom
        </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-text-r-xxl u-margin-r-bottom u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xxl u-margin-r-bottom
        </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-text-r-xxs u-margin-r-left u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xxs u-margin-r-left
        </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-text-r-xs u-margin-r-left u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xs u-margin-r-left
        </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-text-r-s u-margin-r-left u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-s u-margin-r-left
        </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-text-r-m u-margin-r-left u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-m u-margin-r-left
        </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-text-r-l u-margin-r-left u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-l u-margin-r-left
        </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-text-r-xl u-margin-r-left u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xl u-margin-r-left
        </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-text-r-xxl u-margin-r-left u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xxl u-margin-r-left
        </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-text-r-xxs u-margin-r-all u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xxs u-margin-r-all
        </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-text-r-xs u-margin-r-all u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xs u-margin-r-all
        </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-text-r-s u-margin-r-all u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-s u-margin-r-all
        </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-text-r-m u-margin-r-all u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-m u-margin-r-all
        </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-text-r-l u-margin-r-all u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-l u-margin-r-all
        </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-text-r-xl u-margin-r-all u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xl u-margin-r-all
        </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-text-r-xxl u-margin-r-all u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xxl u-margin-r-all
        </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:
    /** @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

There are no notes for this item.