<template>
    <div class="d-flex flex-column gap-1 mx-1 pt-0 pa-7 pb-0">
        <v-card elevation="10">
            <div class="py-6 px-4">
                <p class="text-left">Left aligned on all viewport sizes.</p>
                <p class="text-center">Center aligned on all viewport sizes.</p>
                <p class="text-right">Right aligned on all viewport sizes.</p>
                <p class="text-sm-left">Left aligned on viewports SM (small) or wider.</p>
                <p class="text-right text-md-left">Left aligned on viewports MD (medium) or wider.</p>
                <p class="text-right text-lg-left">Left aligned on viewports LG (large) or wider.</p>
                <p class="text-right text-xl-left">Left aligned on viewports XL (extra-large) or wider.</p>
            </div>
        </v-card>
    </div>
</template>
