<template>
    <div>
        <div class="n-flex flex-gap-none">
            <div class="p-medium align-center bg-primary-fade col-12 md:col-3">
                Box
            </div>
            <div class="p-medium align-center bg-primary-fade col-12 md:col-3">
                Box
            </div>
            <div class="p-medium align-center bg-primary-fade col-12 md:col-3">
                Box
            </div>
            <div class="p-medium align-center bg-primary-fade col-12 md:col-3">
                Box
            </div>
        </div>

        <div class="n-flex flex-gap-medium">
            <div class="p-medium align-center bg-primary-fade col-12 md:col-3">
                Box
            </div>
            <div class="p-medium align-center bg-primary-fade col-12 md:col-3">
                Box
            </div>
            <div class="p-medium align-center bg-primary-fade col-12 md:col-3">
                Box
            </div>
            <div class="p-medium align-center bg-primary-fade col-12 md:col-3">
                Box
            </div>
        </div>

        <div class="n-flex flex-gap-medium">
            <div class="p-medium align-center bg-primary-fade col-12 md:col-3">
                Box
            </div>
            <div class="p-medium align-center bg-primary-fade col-12 md:col-3">
                Box
            </div>
            <div class="p-medium align-center bg-primary-fade col-12 md:col-3">
                Box
            </div>
            <div class="p-medium align-center bg-primary-fade col-12 md:col-3">
                Box
            </div>
        </div>

        <div class="n-flex flex-gap-large">
            <div class="p-medium align-center bg-primary-fade col-12 md:col-3">
                Box
            </div>
            <div class="p-medium align-center bg-primary-fade col-12 md:col-3">
                Box
            </div>
            <div class="p-medium align-center bg-primary-fade col-12 md:col-3">
                Box
            </div>
            <div class="p-medium align-center bg-primary-fade col-12 md:col-3">
                Box
            </div>
        </div>

        <div class="n-flex flex-gap-xlarge">
            <div class="p-medium align-center bg-primary-fade col-12 md:col-3">
                Box
            </div>
            <div class="p-medium align-center bg-primary-fade col-12 md:col-3">
                Box
            </div>
            <div class="p-medium align-center bg-primary-fade col-12 md:col-3">
                Box
            </div>
            <div class="p-medium align-center bg-primary-fade col-12 md:col-3">
                Box
            </div>
        </div>
    </div>
</template>
