<template>
    <p class="_xs:hidden!">This text is hidden starting from xs viewport size.</p>

    <p class="_sm:hidden!">This text is hidden starting from sm viewport size.</p>

    <p class="_md:hidden!">This text is hidden starting from md viewport size.</p>

    <p class="_lg:hidden!">This text is hidden starting from lg viewport size.</p>

    <p class="_xl:hidden!">This text is hidden starting from xl viewport size.</p>

    <p class="_2xl:hidden!">This text is hidden starting from 2xl viewport size.</p>

    <br />

    <p class="_xs:visible!">This text is visible starting from xs viewport size.</p>

    <p class="_sm:visible!">This text is visible starting from sm viewport size.</p>

    <p class="_md:visible!">This text is visible starting from md viewport size.</p>

    <p class="_lg:visible!">This text is visible starting from lg viewport size.</p>

    <p class="_xl:visible!">This text is visible starting from xl viewport size.</p>

    <p class="_2xl:visible!">This text is visible starting from 2xl viewport size.</p>

    <br />

    <p class="_xs:visible! _sm:hidden!">This text is visible only on xs viewport size.</p>

    <p class="_sm:visible! _md:hidden!">This text is visible only on sm viewport size.</p>

    <p class="_md:visible! _lg:hidden!">This text is visible only on md viewport size.</p>

    <p class="_lg:visible! _xl:hidden!">This text is visible only on lg viewport size.</p>

    <p class="_xl:visible! _2xl:hidden!">This text is visible only on xl viewport size.</p>

    <p class="_2xl:visible!">This text is visible only on 2xl viewport size.</p>
</template>
