mycsslab
Version:
MyCSSLab Quantum v3.0 - Revolutionary CSS framework with AI-powered intelligence, holographic UI, neural networks, and quantum effects
901 lines (850 loc) • 45.1 kB
CSS
/**
* FluxCSS Responsive Utilities
* Comprehensive responsive system for all breakpoints
*/
/* Responsive Breakpoints */
@media (min-width: 640px) {
/* Display */
.my-sm\:block { display: block ; }
.my-sm\:inline-block { display: inline-block ; }
.my-sm\:inline { display: inline ; }
.my-sm\:flex { display: flex ; }
.my-sm\:inline-flex { display: inline-flex ; }
.my-sm\:grid { display: grid ; }
.my-sm\:inline-grid { display: inline-grid ; }
.my-sm\:table { display: table ; }
.my-sm\:table-cell { display: table-cell ; }
.my-sm\:table-row { display: table-row ; }
.my-sm\:hidden { display: none ; }
/* Position */
.my-sm\:static { position: static ; }
.my-sm\:fixed { position: fixed ; }
.my-sm\:absolute { position: absolute ; }
.my-sm\:relative { position: relative ; }
.my-sm\:sticky { position: sticky ; }
/* Flexbox */
.my-sm\:flex-row { flex-direction: row ; }
.my-sm\:flex-row-reverse { flex-direction: row-reverse ; }
.my-sm\:flex-col { flex-direction: column ; }
.my-sm\:flex-col-reverse { flex-direction: column-reverse ; }
.my-sm\:flex-wrap { flex-wrap: wrap ; }
.my-sm\:flex-nowrap { flex-wrap: nowrap ; }
.my-sm\:justify-start { justify-content: flex-start ; }
.my-sm\:justify-end { justify-content: flex-end ; }
.my-sm\:justify-center { justify-content: center ; }
.my-sm\:justify-between { justify-content: space-between ; }
.my-sm\:justify-around { justify-content: space-around ; }
.my-sm\:justify-evenly { justify-content: space-evenly ; }
.my-sm\:items-start { align-items: flex-start ; }
.my-sm\:items-end { align-items: flex-end ; }
.my-sm\:items-center { align-items: center ; }
.my-sm\:items-baseline { align-items: baseline ; }
.my-sm\:items-stretch { align-items: stretch ; }
/* Grid */
.my-sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) ; }
.my-sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) ; }
.my-sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) ; }
.my-sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) ; }
.my-sm\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) ; }
.my-sm\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) ; }
.my-sm\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) ; }
.my-sm\:col-span-1 { grid-column: span 1 / span 1 ; }
.my-sm\:col-span-2 { grid-column: span 2 / span 2 ; }
.my-sm\:col-span-3 { grid-column: span 3 / span 3 ; }
.my-sm\:col-span-4 { grid-column: span 4 / span 4 ; }
.my-sm\:col-span-5 { grid-column: span 5 / span 5 ; }
.my-sm\:col-span-6 { grid-column: span 6 / span 6 ; }
.my-sm\:col-span-full { grid-column: 1 / -1 ; }
/* Spacing */
.my-sm\:p-0 { padding: 0 ; }
.my-sm\:p-1 { padding: 0.25rem ; }
.my-sm\:p-2 { padding: 0.5rem ; }
.my-sm\:p-3 { padding: 0.75rem ; }
.my-sm\:p-4 { padding: 1rem ; }
.my-sm\:p-5 { padding: 1.25rem ; }
.my-sm\:p-6 { padding: 1.5rem ; }
.my-sm\:p-8 { padding: 2rem ; }
.my-sm\:p-10 { padding: 2.5rem ; }
.my-sm\:p-12 { padding: 3rem ; }
.my-sm\:p-16 { padding: 4rem ; }
.my-sm\:p-20 { padding: 5rem ; }
.my-sm\:p-24 { padding: 6rem ; }
.my-sm\:p-32 { padding: 8rem ; }
.my-sm\:p-40 { padding: 10rem ; }
.my-sm\:p-48 { padding: 12rem ; }
.my-sm\:p-56 { padding: 14rem ; }
.my-sm\:p-64 { padding: 16rem ; }
.my-sm\:p-72 { padding: 18rem ; }
.my-sm\:p-80 { padding: 20rem ; }
.my-sm\:p-96 { padding: 24rem ; }
.my-sm\:m-0 { margin: 0 ; }
.my-sm\:m-1 { margin: 0.25rem ; }
.my-sm\:m-2 { margin: 0.5rem ; }
.my-sm\:m-3 { margin: 0.75rem ; }
.my-sm\:m-4 { margin: 1rem ; }
.my-sm\:m-5 { margin: 1.25rem ; }
.my-sm\:m-6 { margin: 1.5rem ; }
.my-sm\:m-8 { margin: 2rem ; }
.my-sm\:m-10 { margin: 2.5rem ; }
.my-sm\:m-12 { margin: 3rem ; }
.my-sm\:m-16 { margin: 4rem ; }
.my-sm\:m-20 { margin: 5rem ; }
.my-sm\:m-24 { margin: 6rem ; }
.my-sm\:m-32 { margin: 8rem ; }
.my-sm\:m-40 { margin: 10rem ; }
.my-sm\:m-48 { margin: 12rem ; }
.my-sm\:m-56 { margin: 14rem ; }
.my-sm\:m-64 { margin: 16rem ; }
.my-sm\:m-72 { margin: 18rem ; }
.my-sm\:m-80 { margin: 20rem ; }
.my-sm\:m-96 { margin: 24rem ; }
/* Text */
.my-sm\:text-xs { font-size: 0.75rem ; line-height: 1rem ; }
.my-sm\:text-sm { font-size: 0.875rem ; line-height: 1.25rem ; }
.my-sm\:text-base { font-size: 1rem ; line-height: 1.5rem ; }
.my-sm\:text-lg { font-size: 1.125rem ; line-height: 1.75rem ; }
.my-sm\:text-xl { font-size: 1.25rem ; line-height: 1.75rem ; }
.my-sm\:text-2xl { font-size: 1.5rem ; line-height: 2rem ; }
.my-sm\:text-3xl { font-size: 1.875rem ; line-height: 2.25rem ; }
.my-sm\:text-4xl { font-size: 2.25rem ; line-height: 2.5rem ; }
.my-sm\:text-5xl { font-size: 3rem ; line-height: 1 ; }
.my-sm\:text-6xl { font-size: 3.75rem ; line-height: 1 ; }
.my-sm\:text-7xl { font-size: 4.5rem ; line-height: 1 ; }
.my-sm\:text-8xl { font-size: 6rem ; line-height: 1 ; }
.my-sm\:text-9xl { font-size: 8rem ; line-height: 1 ; }
.my-sm\:text-left { text-align: left ; }
.my-sm\:text-center { text-align: center ; }
.my-sm\:text-right { text-align: right ; }
.my-sm\:text-justify { text-align: justify ; }
/* Width & Height */
.my-sm\:w-auto { width: auto ; }
.my-sm\:w-full { width: 100% ; }
.my-sm\:w-screen { width: 100vw ; }
.my-sm\:w-min { width: min-content ; }
.my-sm\:w-max { width: max-content ; }
.my-sm\:w-fit { width: fit-content ; }
.my-sm\:w-0 { width: 0 ; }
.my-sm\:w-1 { width: 0.25rem ; }
.my-sm\:w-2 { width: 0.5rem ; }
.my-sm\:w-3 { width: 0.75rem ; }
.my-sm\:w-4 { width: 1rem ; }
.my-sm\:w-5 { width: 1.25rem ; }
.my-sm\:w-6 { width: 1.5rem ; }
.my-sm\:w-8 { width: 2rem ; }
.my-sm\:w-10 { width: 2.5rem ; }
.my-sm\:w-12 { width: 3rem ; }
.my-sm\:w-16 { width: 4rem ; }
.my-sm\:w-20 { width: 5rem ; }
.my-sm\:w-24 { width: 6rem ; }
.my-sm\:w-32 { width: 8rem ; }
.my-sm\:w-40 { width: 10rem ; }
.my-sm\:w-48 { width: 12rem ; }
.my-sm\:w-56 { width: 14rem ; }
.my-sm\:w-64 { width: 16rem ; }
.my-sm\:w-72 { width: 18rem ; }
.my-sm\:w-80 { width: 20rem ; }
.my-sm\:w-96 { width: 24rem ; }
.my-sm\:h-auto { height: auto ; }
.my-sm\:h-full { height: 100% ; }
.my-sm\:h-screen { height: 100vh ; }
.my-sm\:h-min { height: min-content ; }
.my-sm\:h-max { height: max-content ; }
.my-sm\:h-fit { height: fit-content ; }
.my-sm\:h-0 { height: 0 ; }
.my-sm\:h-1 { height: 0.25rem ; }
.my-sm\:h-2 { height: 0.5rem ; }
.my-sm\:h-3 { height: 0.75rem ; }
.my-sm\:h-4 { height: 1rem ; }
.my-sm\:h-5 { height: 1.25rem ; }
.my-sm\:h-6 { height: 1.5rem ; }
.my-sm\:h-8 { height: 2rem ; }
.my-sm\:h-10 { height: 2.5rem ; }
.my-sm\:h-12 { height: 3rem ; }
.my-sm\:h-16 { height: 4rem ; }
.my-sm\:h-20 { height: 5rem ; }
.my-sm\:h-24 { height: 6rem ; }
.my-sm\:h-32 { height: 8rem ; }
.my-sm\:h-40 { height: 10rem ; }
.my-sm\:h-48 { height: 12rem ; }
.my-sm\:h-56 { height: 14rem ; }
.my-sm\:h-64 { height: 16rem ; }
.my-sm\:h-72 { height: 18rem ; }
.my-sm\:h-80 { height: 20rem ; }
.my-sm\:h-96 { height: 24rem ; }
}
@media (min-width: 768px) {
/* Display */
.my-md\:block { display: block ; }
.my-md\:inline-block { display: inline-block ; }
.my-md\:inline { display: inline ; }
.my-md\:flex { display: flex ; }
.my-md\:inline-flex { display: inline-flex ; }
.my-md\:grid { display: grid ; }
.my-md\:inline-grid { display: inline-grid ; }
.my-md\:table { display: table ; }
.my-md\:table-cell { display: table-cell ; }
.my-md\:table-row { display: table-row ; }
.my-md\:hidden { display: none ; }
/* Position */
.my-md\:static { position: static ; }
.my-md\:fixed { position: fixed ; }
.my-md\:absolute { position: absolute ; }
.my-md\:relative { position: relative ; }
.my-md\:sticky { position: sticky ; }
/* Flexbox */
.my-md\:flex-row { flex-direction: row ; }
.my-md\:flex-row-reverse { flex-direction: row-reverse ; }
.my-md\:flex-col { flex-direction: column ; }
.my-md\:flex-col-reverse { flex-direction: column-reverse ; }
.my-md\:flex-wrap { flex-wrap: wrap ; }
.my-md\:flex-nowrap { flex-wrap: nowrap ; }
.my-md\:justify-start { justify-content: flex-start ; }
.my-md\:justify-end { justify-content: flex-end ; }
.my-md\:justify-center { justify-content: center ; }
.my-md\:justify-between { justify-content: space-between ; }
.my-md\:justify-around { justify-content: space-around ; }
.my-md\:justify-evenly { justify-content: space-evenly ; }
.my-md\:items-start { align-items: flex-start ; }
.my-md\:items-end { align-items: flex-end ; }
.my-md\:items-center { align-items: center ; }
.my-md\:items-baseline { align-items: baseline ; }
.my-md\:items-stretch { align-items: stretch ; }
/* Grid */
.my-md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) ; }
.my-md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) ; }
.my-md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) ; }
.my-md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) ; }
.my-md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) ; }
.my-md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) ; }
.my-md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) ; }
.my-md\:col-span-1 { grid-column: span 1 / span 1 ; }
.my-md\:col-span-2 { grid-column: span 2 / span 2 ; }
.my-md\:col-span-3 { grid-column: span 3 / span 3 ; }
.my-md\:col-span-4 { grid-column: span 4 / span 4 ; }
.my-md\:col-span-5 { grid-column: span 5 / span 5 ; }
.my-md\:col-span-6 { grid-column: span 6 / span 6 ; }
.my-md\:col-span-full { grid-column: 1 / -1 ; }
/* Spacing */
.my-md\:p-0 { padding: 0 ; }
.my-md\:p-1 { padding: 0.25rem ; }
.my-md\:p-2 { padding: 0.5rem ; }
.my-md\:p-3 { padding: 0.75rem ; }
.my-md\:p-4 { padding: 1rem ; }
.my-md\:p-5 { padding: 1.25rem ; }
.my-md\:p-6 { padding: 1.5rem ; }
.my-md\:p-8 { padding: 2rem ; }
.my-md\:p-10 { padding: 2.5rem ; }
.my-md\:p-12 { padding: 3rem ; }
.my-md\:p-16 { padding: 4rem ; }
.my-md\:p-20 { padding: 5rem ; }
.my-md\:p-24 { padding: 6rem ; }
.my-md\:p-32 { padding: 8rem ; }
.my-md\:p-40 { padding: 10rem ; }
.my-md\:p-48 { padding: 12rem ; }
.my-md\:p-56 { padding: 14rem ; }
.my-md\:p-64 { padding: 16rem ; }
.my-md\:p-72 { padding: 18rem ; }
.my-md\:p-80 { padding: 20rem ; }
.my-md\:p-96 { padding: 24rem ; }
.my-md\:m-0 { margin: 0 ; }
.my-md\:m-1 { margin: 0.25rem ; }
.my-md\:m-2 { margin: 0.5rem ; }
.my-md\:m-3 { margin: 0.75rem ; }
.my-md\:m-4 { margin: 1rem ; }
.my-md\:m-5 { margin: 1.25rem ; }
.my-md\:m-6 { margin: 1.5rem ; }
.my-md\:m-8 { margin: 2rem ; }
.my-md\:m-10 { margin: 2.5rem ; }
.my-md\:m-12 { margin: 3rem ; }
.my-md\:m-16 { margin: 4rem ; }
.my-md\:m-20 { margin: 5rem ; }
.my-md\:m-24 { margin: 6rem ; }
.my-md\:m-32 { margin: 8rem ; }
.my-md\:m-40 { margin: 10rem ; }
.my-md\:m-48 { margin: 12rem ; }
.my-md\:m-56 { margin: 14rem ; }
.my-md\:m-64 { margin: 16rem ; }
.my-md\:m-72 { margin: 18rem ; }
.my-md\:m-80 { margin: 20rem ; }
.my-md\:m-96 { margin: 24rem ; }
/* Text */
.my-md\:text-xs { font-size: 0.75rem ; line-height: 1rem ; }
.my-md\:text-sm { font-size: 0.875rem ; line-height: 1.25rem ; }
.my-md\:text-base { font-size: 1rem ; line-height: 1.5rem ; }
.my-md\:text-lg { font-size: 1.125rem ; line-height: 1.75rem ; }
.my-md\:text-xl { font-size: 1.25rem ; line-height: 1.75rem ; }
.my-md\:text-2xl { font-size: 1.5rem ; line-height: 2rem ; }
.my-md\:text-3xl { font-size: 1.875rem ; line-height: 2.25rem ; }
.my-md\:text-4xl { font-size: 2.25rem ; line-height: 2.5rem ; }
.my-md\:text-5xl { font-size: 3rem ; line-height: 1 ; }
.my-md\:text-6xl { font-size: 3.75rem ; line-height: 1 ; }
.my-md\:text-7xl { font-size: 4.5rem ; line-height: 1 ; }
.my-md\:text-8xl { font-size: 6rem ; line-height: 1 ; }
.my-md\:text-9xl { font-size: 8rem ; line-height: 1 ; }
.my-md\:text-left { text-align: left ; }
.my-md\:text-center { text-align: center ; }
.my-md\:text-right { text-align: right ; }
.my-md\:text-justify { text-align: justify ; }
/* Width & Height */
.my-md\:w-auto { width: auto ; }
.my-md\:w-full { width: 100% ; }
.my-md\:w-screen { width: 100vw ; }
.my-md\:w-min { width: min-content ; }
.my-md\:w-max { width: max-content ; }
.my-md\:w-fit { width: fit-content ; }
.my-md\:w-0 { width: 0 ; }
.my-md\:w-1 { width: 0.25rem ; }
.my-md\:w-2 { width: 0.5rem ; }
.my-md\:w-3 { width: 0.75rem ; }
.my-md\:w-4 { width: 1rem ; }
.my-md\:w-5 { width: 1.25rem ; }
.my-md\:w-6 { width: 1.5rem ; }
.my-md\:w-8 { width: 2rem ; }
.my-md\:w-10 { width: 2.5rem ; }
.my-md\:w-12 { width: 3rem ; }
.my-md\:w-16 { width: 4rem ; }
.my-md\:w-20 { width: 5rem ; }
.my-md\:w-24 { width: 6rem ; }
.my-md\:w-32 { width: 8rem ; }
.my-md\:w-40 { width: 10rem ; }
.my-md\:w-48 { width: 12rem ; }
.my-md\:w-56 { width: 14rem ; }
.my-md\:w-64 { width: 16rem ; }
.my-md\:w-72 { width: 18rem ; }
.my-md\:w-80 { width: 20rem ; }
.my-md\:w-96 { width: 24rem ; }
.my-md\:h-auto { height: auto ; }
.my-md\:h-full { height: 100% ; }
.my-md\:h-screen { height: 100vh ; }
.my-md\:h-min { height: min-content ; }
.my-md\:h-max { height: max-content ; }
.my-md\:h-fit { height: fit-content ; }
.my-md\:h-0 { height: 0 ; }
.my-md\:h-1 { height: 0.25rem ; }
.my-md\:h-2 { height: 0.5rem ; }
.my-md\:h-3 { height: 0.75rem ; }
.my-md\:h-4 { height: 1rem ; }
.my-md\:h-5 { height: 1.25rem ; }
.my-md\:h-6 { height: 1.5rem ; }
.my-md\:h-8 { height: 2rem ; }
.my-md\:h-10 { height: 2.5rem ; }
.my-md\:h-12 { height: 3rem ; }
.my-md\:h-16 { height: 4rem ; }
.my-md\:h-20 { height: 5rem ; }
.my-md\:h-24 { height: 6rem ; }
.my-md\:h-32 { height: 8rem ; }
.my-md\:h-40 { height: 10rem ; }
.my-md\:h-48 { height: 12rem ; }
.my-md\:h-56 { height: 14rem ; }
.my-md\:h-64 { height: 16rem ; }
.my-md\:h-72 { height: 18rem ; }
.my-md\:h-80 { height: 20rem ; }
.my-md\:h-96 { height: 24rem ; }
}
@media (min-width: 1024px) {
/* Display */
.my-lg\:block { display: block ; }
.my-lg\:inline-block { display: inline-block ; }
.my-lg\:inline { display: inline ; }
.my-lg\:flex { display: flex ; }
.my-lg\:inline-flex { display: inline-flex ; }
.my-lg\:grid { display: grid ; }
.my-lg\:inline-grid { display: inline-grid ; }
.my-lg\:table { display: table ; }
.my-lg\:table-cell { display: table-cell ; }
.my-lg\:table-row { display: table-row ; }
.my-lg\:hidden { display: none ; }
/* Position */
.my-lg\:static { position: static ; }
.my-lg\:fixed { position: fixed ; }
.my-lg\:absolute { position: absolute ; }
.my-lg\:relative { position: relative ; }
.my-lg\:sticky { position: sticky ; }
/* Flexbox */
.my-lg\:flex-row { flex-direction: row ; }
.my-lg\:flex-row-reverse { flex-direction: row-reverse ; }
.my-lg\:flex-col { flex-direction: column ; }
.my-lg\:flex-col-reverse { flex-direction: column-reverse ; }
.my-lg\:flex-wrap { flex-wrap: wrap ; }
.my-lg\:flex-nowrap { flex-wrap: nowrap ; }
.my-lg\:justify-start { justify-content: flex-start ; }
.my-lg\:justify-end { justify-content: flex-end ; }
.my-lg\:justify-center { justify-content: center ; }
.my-lg\:justify-between { justify-content: space-between ; }
.my-lg\:justify-around { justify-content: space-around ; }
.my-lg\:justify-evenly { justify-content: space-evenly ; }
.my-lg\:items-start { align-items: flex-start ; }
.my-lg\:items-end { align-items: flex-end ; }
.my-lg\:items-center { align-items: center ; }
.my-lg\:items-baseline { align-items: baseline ; }
.my-lg\:items-stretch { align-items: stretch ; }
/* Grid */
.my-lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) ; }
.my-lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) ; }
.my-lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) ; }
.my-lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) ; }
.my-lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) ; }
.my-lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) ; }
.my-lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) ; }
.my-lg\:col-span-1 { grid-column: span 1 / span 1 ; }
.my-lg\:col-span-2 { grid-column: span 2 / span 2 ; }
.my-lg\:col-span-3 { grid-column: span 3 / span 3 ; }
.my-lg\:col-span-4 { grid-column: span 4 / span 4 ; }
.my-lg\:col-span-5 { grid-column: span 5 / span 5 ; }
.my-lg\:col-span-6 { grid-column: span 6 / span 6 ; }
.my-lg\:col-span-full { grid-column: 1 / -1 ; }
/* Spacing */
.my-lg\:p-0 { padding: 0 ; }
.my-lg\:p-1 { padding: 0.25rem ; }
.my-lg\:p-2 { padding: 0.5rem ; }
.my-lg\:p-3 { padding: 0.75rem ; }
.my-lg\:p-4 { padding: 1rem ; }
.my-lg\:p-5 { padding: 1.25rem ; }
.my-lg\:p-6 { padding: 1.5rem ; }
.my-lg\:p-8 { padding: 2rem ; }
.my-lg\:p-10 { padding: 2.5rem ; }
.my-lg\:p-12 { padding: 3rem ; }
.my-lg\:p-16 { padding: 4rem ; }
.my-lg\:p-20 { padding: 5rem ; }
.my-lg\:p-24 { padding: 6rem ; }
.my-lg\:p-32 { padding: 8rem ; }
.my-lg\:p-40 { padding: 10rem ; }
.my-lg\:p-48 { padding: 12rem ; }
.my-lg\:p-56 { padding: 14rem ; }
.my-lg\:p-64 { padding: 16rem ; }
.my-lg\:p-72 { padding: 18rem ; }
.my-lg\:p-80 { padding: 20rem ; }
.my-lg\:p-96 { padding: 24rem ; }
.my-lg\:m-0 { margin: 0 ; }
.my-lg\:m-1 { margin: 0.25rem ; }
.my-lg\:m-2 { margin: 0.5rem ; }
.my-lg\:m-3 { margin: 0.75rem ; }
.my-lg\:m-4 { margin: 1rem ; }
.my-lg\:m-5 { margin: 1.25rem ; }
.my-lg\:m-6 { margin: 1.5rem ; }
.my-lg\:m-8 { margin: 2rem ; }
.my-lg\:m-10 { margin: 2.5rem ; }
.my-lg\:m-12 { margin: 3rem ; }
.my-lg\:m-16 { margin: 4rem ; }
.my-lg\:m-20 { margin: 5rem ; }
.my-lg\:m-24 { margin: 6rem ; }
.my-lg\:m-32 { margin: 8rem ; }
.my-lg\:m-40 { margin: 10rem ; }
.my-lg\:m-48 { margin: 12rem ; }
.my-lg\:m-56 { margin: 14rem ; }
.my-lg\:m-64 { margin: 16rem ; }
.my-lg\:m-72 { margin: 18rem ; }
.my-lg\:m-80 { margin: 20rem ; }
.my-lg\:m-96 { margin: 24rem ; }
/* Text */
.my-lg\:text-xs { font-size: 0.75rem ; line-height: 1rem ; }
.my-lg\:text-sm { font-size: 0.875rem ; line-height: 1.25rem ; }
.my-lg\:text-base { font-size: 1rem ; line-height: 1.5rem ; }
.my-lg\:text-lg { font-size: 1.125rem ; line-height: 1.75rem ; }
.my-lg\:text-xl { font-size: 1.25rem ; line-height: 1.75rem ; }
.my-lg\:text-2xl { font-size: 1.5rem ; line-height: 2rem ; }
.my-lg\:text-3xl { font-size: 1.875rem ; line-height: 2.25rem ; }
.my-lg\:text-4xl { font-size: 2.25rem ; line-height: 2.5rem ; }
.my-lg\:text-5xl { font-size: 3rem ; line-height: 1 ; }
.my-lg\:text-6xl { font-size: 3.75rem ; line-height: 1 ; }
.my-lg\:text-7xl { font-size: 4.5rem ; line-height: 1 ; }
.my-lg\:text-8xl { font-size: 6rem ; line-height: 1 ; }
.my-lg\:text-9xl { font-size: 8rem ; line-height: 1 ; }
.my-lg\:text-left { text-align: left ; }
.my-lg\:text-center { text-align: center ; }
.my-lg\:text-right { text-align: right ; }
.my-lg\:text-justify { text-align: justify ; }
/* Width & Height */
.my-lg\:w-auto { width: auto ; }
.my-lg\:w-full { width: 100% ; }
.my-lg\:w-screen { width: 100vw ; }
.my-lg\:w-min { width: min-content ; }
.my-lg\:w-max { width: max-content ; }
.my-lg\:w-fit { width: fit-content ; }
.my-lg\:w-0 { width: 0 ; }
.my-lg\:w-1 { width: 0.25rem ; }
.my-lg\:w-2 { width: 0.5rem ; }
.my-lg\:w-3 { width: 0.75rem ; }
.my-lg\:w-4 { width: 1rem ; }
.my-lg\:w-5 { width: 1.25rem ; }
.my-lg\:w-6 { width: 1.5rem ; }
.my-lg\:w-8 { width: 2rem ; }
.my-lg\:w-10 { width: 2.5rem ; }
.my-lg\:w-12 { width: 3rem ; }
.my-lg\:w-16 { width: 4rem ; }
.my-lg\:w-20 { width: 5rem ; }
.my-lg\:w-24 { width: 6rem ; }
.my-lg\:w-32 { width: 8rem ; }
.my-lg\:w-40 { width: 10rem ; }
.my-lg\:w-48 { width: 12rem ; }
.my-lg\:w-56 { width: 14rem ; }
.my-lg\:w-64 { width: 16rem ; }
.my-lg\:w-72 { width: 18rem ; }
.my-lg\:w-80 { width: 20rem ; }
.my-lg\:w-96 { width: 24rem ; }
.my-lg\:h-auto { height: auto ; }
.my-lg\:h-full { height: 100% ; }
.my-lg\:h-screen { height: 100vh ; }
.my-lg\:h-min { height: min-content ; }
.my-lg\:h-max { height: max-content ; }
.my-lg\:h-fit { height: fit-content ; }
.my-lg\:h-0 { height: 0 ; }
.my-lg\:h-1 { height: 0.25rem ; }
.my-lg\:h-2 { height: 0.5rem ; }
.my-lg\:h-3 { height: 0.75rem ; }
.my-lg\:h-4 { height: 1rem ; }
.my-lg\:h-5 { height: 1.25rem ; }
.my-lg\:h-6 { height: 1.5rem ; }
.my-lg\:h-8 { height: 2rem ; }
.my-lg\:h-10 { height: 2.5rem ; }
.my-lg\:h-12 { height: 3rem ; }
.my-lg\:h-16 { height: 4rem ; }
.my-lg\:h-20 { height: 5rem ; }
.my-lg\:h-24 { height: 6rem ; }
.my-lg\:h-32 { height: 8rem ; }
.my-lg\:h-40 { height: 10rem ; }
.my-lg\:h-48 { height: 12rem ; }
.my-lg\:h-56 { height: 14rem ; }
.my-lg\:h-64 { height: 16rem ; }
.my-lg\:h-72 { height: 18rem ; }
.my-lg\:h-80 { height: 20rem ; }
.my-lg\:h-96 { height: 24rem ; }
}
@media (min-width: 1280px) {
/* Display */
.my-xl\:block { display: block ; }
.my-xl\:inline-block { display: inline-block ; }
.my-xl\:inline { display: inline ; }
.my-xl\:flex { display: flex ; }
.my-xl\:inline-flex { display: inline-flex ; }
.my-xl\:grid { display: grid ; }
.my-xl\:inline-grid { display: inline-grid ; }
.my-xl\:table { display: table ; }
.my-xl\:table-cell { display: table-cell ; }
.my-xl\:table-row { display: table-row ; }
.my-xl\:hidden { display: none ; }
/* Position */
.my-xl\:static { position: static ; }
.my-xl\:fixed { position: fixed ; }
.my-xl\:absolute { position: absolute ; }
.my-xl\:relative { position: relative ; }
.my-xl\:sticky { position: sticky ; }
/* Flexbox */
.my-xl\:flex-row { flex-direction: row ; }
.my-xl\:flex-row-reverse { flex-direction: row-reverse ; }
.my-xl\:flex-col { flex-direction: column ; }
.my-xl\:flex-col-reverse { flex-direction: column-reverse ; }
.my-xl\:flex-wrap { flex-wrap: wrap ; }
.my-xl\:flex-nowrap { flex-wrap: nowrap ; }
.my-xl\:justify-start { justify-content: flex-start ; }
.my-xl\:justify-end { justify-content: flex-end ; }
.my-xl\:justify-center { justify-content: center ; }
.my-xl\:justify-between { justify-content: space-between ; }
.my-xl\:justify-around { justify-content: space-around ; }
.my-xl\:justify-evenly { justify-content: space-evenly ; }
.my-xl\:items-start { align-items: flex-start ; }
.my-xl\:items-end { align-items: flex-end ; }
.my-xl\:items-center { align-items: center ; }
.my-xl\:items-baseline { align-items: baseline ; }
.my-xl\:items-stretch { align-items: stretch ; }
/* Grid */
.my-xl\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) ; }
.my-xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) ; }
.my-xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) ; }
.my-xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) ; }
.my-xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) ; }
.my-xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) ; }
.my-xl\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) ; }
.my-xl\:col-span-1 { grid-column: span 1 / span 1 ; }
.my-xl\:col-span-2 { grid-column: span 2 / span 2 ; }
.my-xl\:col-span-3 { grid-column: span 3 / span 3 ; }
.my-xl\:col-span-4 { grid-column: span 4 / span 4 ; }
.my-xl\:col-span-5 { grid-column: span 5 / span 5 ; }
.my-xl\:col-span-6 { grid-column: span 6 / span 6 ; }
.my-xl\:col-span-full { grid-column: 1 / -1 ; }
/* Spacing */
.my-xl\:p-0 { padding: 0 ; }
.my-xl\:p-1 { padding: 0.25rem ; }
.my-xl\:p-2 { padding: 0.5rem ; }
.my-xl\:p-3 { padding: 0.75rem ; }
.my-xl\:p-4 { padding: 1rem ; }
.my-xl\:p-5 { padding: 1.25rem ; }
.my-xl\:p-6 { padding: 1.5rem ; }
.my-xl\:p-8 { padding: 2rem ; }
.my-xl\:p-10 { padding: 2.5rem ; }
.my-xl\:p-12 { padding: 3rem ; }
.my-xl\:p-16 { padding: 4rem ; }
.my-xl\:p-20 { padding: 5rem ; }
.my-xl\:p-24 { padding: 6rem ; }
.my-xl\:p-32 { padding: 8rem ; }
.my-xl\:p-40 { padding: 10rem ; }
.my-xl\:p-48 { padding: 12rem ; }
.my-xl\:p-56 { padding: 14rem ; }
.my-xl\:p-64 { padding: 16rem ; }
.my-xl\:p-72 { padding: 18rem ; }
.my-xl\:p-80 { padding: 20rem ; }
.my-xl\:p-96 { padding: 24rem ; }
.my-xl\:m-0 { margin: 0 ; }
.my-xl\:m-1 { margin: 0.25rem ; }
.my-xl\:m-2 { margin: 0.5rem ; }
.my-xl\:m-3 { margin: 0.75rem ; }
.my-xl\:m-4 { margin: 1rem ; }
.my-xl\:m-5 { margin: 1.25rem ; }
.my-xl\:m-6 { margin: 1.5rem ; }
.my-xl\:m-8 { margin: 2rem ; }
.my-xl\:m-10 { margin: 2.5rem ; }
.my-xl\:m-12 { margin: 3rem ; }
.my-xl\:m-16 { margin: 4rem ; }
.my-xl\:m-20 { margin: 5rem ; }
.my-xl\:m-24 { margin: 6rem ; }
.my-xl\:m-32 { margin: 8rem ; }
.my-xl\:m-40 { margin: 10rem ; }
.my-xl\:m-48 { margin: 12rem ; }
.my-xl\:m-56 { margin: 14rem ; }
.my-xl\:m-64 { margin: 16rem ; }
.my-xl\:m-72 { margin: 18rem ; }
.my-xl\:m-80 { margin: 20rem ; }
.my-xl\:m-96 { margin: 24rem ; }
/* Text */
.my-xl\:text-xs { font-size: 0.75rem ; line-height: 1rem ; }
.my-xl\:text-sm { font-size: 0.875rem ; line-height: 1.25rem ; }
.my-xl\:text-base { font-size: 1rem ; line-height: 1.5rem ; }
.my-xl\:text-lg { font-size: 1.125rem ; line-height: 1.75rem ; }
.my-xl\:text-xl { font-size: 1.25rem ; line-height: 1.75rem ; }
.my-xl\:text-2xl { font-size: 1.5rem ; line-height: 2rem ; }
.my-xl\:text-3xl { font-size: 1.875rem ; line-height: 2.25rem ; }
.my-xl\:text-4xl { font-size: 2.25rem ; line-height: 2.5rem ; }
.my-xl\:text-5xl { font-size: 3rem ; line-height: 1 ; }
.my-xl\:text-6xl { font-size: 3.75rem ; line-height: 1 ; }
.my-xl\:text-7xl { font-size: 4.5rem ; line-height: 1 ; }
.my-xl\:text-8xl { font-size: 6rem ; line-height: 1 ; }
.my-xl\:text-9xl { font-size: 8rem ; line-height: 1 ; }
.my-xl\:text-left { text-align: left ; }
.my-xl\:text-center { text-align: center ; }
.my-xl\:text-right { text-align: right ; }
.my-xl\:text-justify { text-align: justify ; }
/* Width & Height */
.my-xl\:w-auto { width: auto ; }
.my-xl\:w-full { width: 100% ; }
.my-xl\:w-screen { width: 100vw ; }
.my-xl\:w-min { width: min-content ; }
.my-xl\:w-max { width: max-content ; }
.my-xl\:w-fit { width: fit-content ; }
.my-xl\:w-0 { width: 0 ; }
.my-xl\:w-1 { width: 0.25rem ; }
.my-xl\:w-2 { width: 0.5rem ; }
.my-xl\:w-3 { width: 0.75rem ; }
.my-xl\:w-4 { width: 1rem ; }
.my-xl\:w-5 { width: 1.25rem ; }
.my-xl\:w-6 { width: 1.5rem ; }
.my-xl\:w-8 { width: 2rem ; }
.my-xl\:w-10 { width: 2.5rem ; }
.my-xl\:w-12 { width: 3rem ; }
.my-xl\:w-16 { width: 4rem ; }
.my-xl\:w-20 { width: 5rem ; }
.my-xl\:w-24 { width: 6rem ; }
.my-xl\:w-32 { width: 8rem ; }
.my-xl\:w-40 { width: 10rem ; }
.my-xl\:w-48 { width: 12rem ; }
.my-xl\:w-56 { width: 14rem ; }
.my-xl\:w-64 { width: 16rem ; }
.my-xl\:w-72 { width: 18rem ; }
.my-xl\:w-80 { width: 20rem ; }
.my-xl\:w-96 { width: 24rem ; }
.my-xl\:h-auto { height: auto ; }
.my-xl\:h-full { height: 100% ; }
.my-xl\:h-screen { height: 100vh ; }
.my-xl\:h-min { height: min-content ; }
.my-xl\:h-max { height: max-content ; }
.my-xl\:h-fit { height: fit-content ; }
.my-xl\:h-0 { height: 0 ; }
.my-xl\:h-1 { height: 0.25rem ; }
.my-xl\:h-2 { height: 0.5rem ; }
.my-xl\:h-3 { height: 0.75rem ; }
.my-xl\:h-4 { height: 1rem ; }
.my-xl\:h-5 { height: 1.25rem ; }
.my-xl\:h-6 { height: 1.5rem ; }
.my-xl\:h-8 { height: 2rem ; }
.my-xl\:h-10 { height: 2.5rem ; }
.my-xl\:h-12 { height: 3rem ; }
.my-xl\:h-16 { height: 4rem ; }
.my-xl\:h-20 { height: 5rem ; }
.my-xl\:h-24 { height: 6rem ; }
.my-xl\:h-32 { height: 8rem ; }
.my-xl\:h-40 { height: 10rem ; }
.my-xl\:h-48 { height: 12rem ; }
.my-xl\:h-56 { height: 14rem ; }
.my-xl\:h-64 { height: 16rem ; }
.my-xl\:h-72 { height: 18rem ; }
.my-xl\:h-80 { height: 20rem ; }
.my-xl\:h-96 { height: 24rem ; }
}
@media (min-width: 1536px) {
/* Display */
.my-2xl\:block { display: block ; }
.my-2xl\:inline-block { display: inline-block ; }
.my-2xl\:inline { display: inline ; }
.my-2xl\:flex { display: flex ; }
.my-2xl\:inline-flex { display: inline-flex ; }
.my-2xl\:grid { display: grid ; }
.my-2xl\:inline-grid { display: inline-grid ; }
.my-2xl\:table { display: table ; }
.my-2xl\:table-cell { display: table-cell ; }
.my-2xl\:table-row { display: table-row ; }
.my-2xl\:hidden { display: none ; }
/* Position */
.my-2xl\:static { position: static ; }
.my-2xl\:fixed { position: fixed ; }
.my-2xl\:absolute { position: absolute ; }
.my-2xl\:relative { position: relative ; }
.my-2xl\:sticky { position: sticky ; }
/* Flexbox */
.my-2xl\:flex-row { flex-direction: row ; }
.my-2xl\:flex-row-reverse { flex-direction: row-reverse ; }
.my-2xl\:flex-col { flex-direction: column ; }
.my-2xl\:flex-col-reverse { flex-direction: column-reverse ; }
.my-2xl\:flex-wrap { flex-wrap: wrap ; }
.my-2xl\:flex-nowrap { flex-wrap: nowrap ; }
.my-2xl\:justify-start { justify-content: flex-start ; }
.my-2xl\:justify-end { justify-content: flex-end ; }
.my-2xl\:justify-center { justify-content: center ; }
.my-2xl\:justify-between { justify-content: space-between ; }
.my-2xl\:justify-around { justify-content: space-around ; }
.my-2xl\:justify-evenly { justify-content: space-evenly ; }
.my-2xl\:items-start { align-items: flex-start ; }
.my-2xl\:items-end { align-items: flex-end ; }
.my-2xl\:items-center { align-items: center ; }
.my-2xl\:items-baseline { align-items: baseline ; }
.my-2xl\:items-stretch { align-items: stretch ; }
/* Grid */
.my-2xl\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) ; }
.my-2xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) ; }
.my-2xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) ; }
.my-2xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) ; }
.my-2xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) ; }
.my-2xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) ; }
.my-2xl\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) ; }
.my-2xl\:col-span-1 { grid-column: span 1 / span 1 ; }
.my-2xl\:col-span-2 { grid-column: span 2 / span 2 ; }
.my-2xl\:col-span-3 { grid-column: span 3 / span 3 ; }
.my-2xl\:col-span-4 { grid-column: span 4 / span 4 ; }
.my-2xl\:col-span-5 { grid-column: span 5 / span 5 ; }
.my-2xl\:col-span-6 { grid-column: span 6 / span 6 ; }
.my-2xl\:col-span-full { grid-column: 1 / -1 ; }
/* Spacing */
.my-2xl\:p-0 { padding: 0 ; }
.my-2xl\:p-1 { padding: 0.25rem ; }
.my-2xl\:p-2 { padding: 0.5rem ; }
.my-2xl\:p-3 { padding: 0.75rem ; }
.my-2xl\:p-4 { padding: 1rem ; }
.my-2xl\:p-5 { padding: 1.25rem ; }
.my-2xl\:p-6 { padding: 1.5rem ; }
.my-2xl\:p-8 { padding: 2rem ; }
.my-2xl\:p-10 { padding: 2.5rem ; }
.my-2xl\:p-12 { padding: 3rem ; }
.my-2xl\:p-16 { padding: 4rem ; }
.my-2xl\:p-20 { padding: 5rem ; }
.my-2xl\:p-24 { padding: 6rem ; }
.my-2xl\:p-32 { padding: 8rem ; }
.my-2xl\:p-40 { padding: 10rem ; }
.my-2xl\:p-48 { padding: 12rem ; }
.my-2xl\:p-56 { padding: 14rem ; }
.my-2xl\:p-64 { padding: 16rem ; }
.my-2xl\:p-72 { padding: 18rem ; }
.my-2xl\:p-80 { padding: 20rem ; }
.my-2xl\:p-96 { padding: 24rem ; }
.my-2xl\:m-0 { margin: 0 ; }
.my-2xl\:m-1 { margin: 0.25rem ; }
.my-2xl\:m-2 { margin: 0.5rem ; }
.my-2xl\:m-3 { margin: 0.75rem ; }
.my-2xl\:m-4 { margin: 1rem ; }
.my-2xl\:m-5 { margin: 1.25rem ; }
.my-2xl\:m-6 { margin: 1.5rem ; }
.my-2xl\:m-8 { margin: 2rem ; }
.my-2xl\:m-10 { margin: 2.5rem ; }
.my-2xl\:m-12 { margin: 3rem ; }
.my-2xl\:m-16 { margin: 4rem ; }
.my-2xl\:m-20 { margin: 5rem ; }
.my-2xl\:m-24 { margin: 6rem ; }
.my-2xl\:m-32 { margin: 8rem ; }
.my-2xl\:m-40 { margin: 10rem ; }
.my-2xl\:m-48 { margin: 12rem ; }
.my-2xl\:m-56 { margin: 14rem ; }
.my-2xl\:m-64 { margin: 16rem ; }
.my-2xl\:m-72 { margin: 18rem ; }
.my-2xl\:m-80 { margin: 20rem ; }
.my-2xl\:m-96 { margin: 24rem ; }
/* Text */
.my-2xl\:text-xs { font-size: 0.75rem ; line-height: 1rem ; }
.my-2xl\:text-sm { font-size: 0.875rem ; line-height: 1.25rem ; }
.my-2xl\:text-base { font-size: 1rem ; line-height: 1.5rem ; }
.my-2xl\:text-lg { font-size: 1.125rem ; line-height: 1.75rem ; }
.my-2xl\:text-xl { font-size: 1.25rem ; line-height: 1.75rem ; }
.my-2xl\:text-2xl { font-size: 1.5rem ; line-height: 2rem ; }
.my-2xl\:text-3xl { font-size: 1.875rem ; line-height: 2.25rem ; }
.my-2xl\:text-4xl { font-size: 2.25rem ; line-height: 2.5rem ; }
.my-2xl\:text-5xl { font-size: 3rem ; line-height: 1 ; }
.my-2xl\:text-6xl { font-size: 3.75rem ; line-height: 1 ; }
.my-2xl\:text-7xl { font-size: 4.5rem ; line-height: 1 ; }
.my-2xl\:text-8xl { font-size: 6rem ; line-height: 1 ; }
.my-2xl\:text-9xl { font-size: 8rem ; line-height: 1 ; }
.my-2xl\:text-left { text-align: left ; }
.my-2xl\:text-center { text-align: center ; }
.my-2xl\:text-right { text-align: right ; }
.my-2xl\:text-justify { text-align: justify ; }
/* Width & Height */
.my-2xl\:w-auto { width: auto ; }
.my-2xl\:w-full { width: 100% ; }
.my-2xl\:w-screen { width: 100vw ; }
.my-2xl\:w-min { width: min-content ; }
.my-2xl\:w-max { width: max-content ; }
.my-2xl\:w-fit { width: fit-content ; }
.my-2xl\:w-0 { width: 0 ; }
.my-2xl\:w-1 { width: 0.25rem ; }
.my-2xl\:w-2 { width: 0.5rem ; }
.my-2xl\:w-3 { width: 0.75rem ; }
.my-2xl\:w-4 { width: 1rem ; }
.my-2xl\:w-5 { width: 1.25rem ; }
.my-2xl\:w-6 { width: 1.5rem ; }
.my-2xl\:w-8 { width: 2rem ; }
.my-2xl\:w-10 { width: 2.5rem ; }
.my-2xl\:w-12 { width: 3rem ; }
.my-2xl\:w-16 { width: 4rem ; }
.my-2xl\:w-20 { width: 5rem ; }
.my-2xl\:w-24 { width: 6rem ; }
.my-2xl\:w-32 { width: 8rem ; }
.my-2xl\:w-40 { width: 10rem ; }
.my-2xl\:w-48 { width: 12rem ; }
.my-2xl\:w-56 { width: 14rem ; }
.my-2xl\:w-64 { width: 16rem ; }
.my-2xl\:w-72 { width: 18rem ; }
.my-2xl\:w-80 { width: 20rem ; }
.my-2xl\:w-96 { width: 24rem ; }
.my-2xl\:h-auto { height: auto ; }
.my-2xl\:h-full { height: 100% ; }
.my-2xl\:h-screen { height: 100vh ; }
.my-2xl\:h-min { height: min-content ; }
.my-2xl\:h-max { height: max-content ; }
.my-2xl\:h-fit { height: fit-content ; }
.my-2xl\:h-0 { height: 0 ; }
.my-2xl\:h-1 { height: 0.25rem ; }
.my-2xl\:h-2 { height: 0.5rem ; }
.my-2xl\:h-3 { height: 0.75rem ; }
.my-2xl\:h-4 { height: 1rem ; }
.my-2xl\:h-5 { height: 1.25rem ; }
.my-2xl\:h-6 { height: 1.5rem ; }
.my-2xl\:h-8 { height: 2rem ; }
.my-2xl\:h-10 { height: 2.5rem ; }
.my-2xl\:h-12 { height: 3rem ; }
.my-2xl\:h-16 { height: 4rem ; }
.my-2xl\:h-20 { height: 5rem ; }
.my-2xl\:h-24 { height: 6rem ; }
.my-2xl\:h-32 { height: 8rem ; }
.my-2xl\:h-40 { height: 10rem ; }
.my-2xl\:h-48 { height: 12rem ; }
.my-2xl\:h-56 { height: 14rem ; }
.my-2xl\:h-64 { height: 16rem ; }
.my-2xl\:h-72 { height: 18rem ; }
.my-2xl\:h-80 { height: 20rem ; }
.my-2xl\:h-96 { height: 24rem ; }
}