.overflow-auto {overflow: auto;}
.overflow-hidden {overflow: hidden;}
.overflow-visible {overflow: initial;}
.overflow-scroll {overflow: initial;}

.font-kr {font-family: var(--font-kr);}
.font-en {font-family: var(--font-en);}

.z-0 {z-index: 0;} 
.z-1 {z-index: 10;} 
.z-2 {z-index: 50;} 
.z-3 {z-index: 100;} 
.z-4 {z-index: 500;} 
.z-5 {z-index: 1000;} 

.text-dark {color: var(--dark);}
.text-primary {color: var(--primary)}
.text-secondary {color: var(--secondary)}
.text-third {color: var(--third)}
.text-alert {color: var(--alert);}
.text-white {color: #fff;}
.text-gray-50 {color: var(--gray-50)}
.text-gray-100 {color: var(--gray-100)}
.text-gray-200 {color: var(--gray-200)}
.text-gray-300 {color: var(--gray-300)}
.text-gray-400 {color: var(--gray-400)}
.text-gray-500 {color: var(--gray-500)}
.text-gray-600 {color: var(--gray-600)}
.text-gray-700 {color: var(--gray-700)}
.text-gray-800 {color: var(--gray-800)}
.text-gray-900 {color: var(--gray-900)}

.text-3xs {font-size: var(--text-3xs);}
.text-2xs {font-size: var(--text-2xs);}
.text-xs {font-size: var(--text-xs);}
.text-sm {font-size: var(--text-sm);}
.text-base {font-size: var(--text-base);}
.text-lg {font-size: var(--text-lg);}
.text-xl {font-size: var(--text-xl);}
.text-2xl {font-size: var(--text-2xl);}
.text-3xl {font-size: var(--text-3xl);}
.text-4xl {font-size: var(--text-4xl);}
.text-5xl {font-size: var(--text-5xl);}
.text-6xl {font-size: var(--text-6xl);}
.text-7xl {font-size: var(--text-7xl);}
.text-8xl {font-size: var(--text-8xl);}

@media (max-width: 1536px) {
  .\2xl\:text-3xs {font-size: var(--text-3xs);}
  .\2xl\:text-2xs {font-size: var(--text-2xs);}
  .\2xl\:text-xs {font-size: var(--text-xs);}
  .\2xl\:text-sm {font-size: var(--text-sm);}
  .\2xl\:text-lg {font-size: var(--text-lg);}
  .\2xl\:text-xl {font-size: var(--text-xl);}
  .\2xl\:text-2xl {font-size: var(--text-2xl);}
  .\2xl\:text-3xl {font-size: var(--text-3xl);}
  .\2xl\:text-4xl {font-size: var(--text-4xl);}
  .\2xl\:text-5xl {font-size: var(--text-5xl);}
  .\2xl\:text-6xl {font-size: var(--text-6xl);}
  .\2xl\:text-7xl {font-size: var(--text-7xl);}
  .\2xl\:text-8xl {font-size: var(--text-8xl);}
}

@media (max-width: 1320px) {
  .\xl\:text-3xs {font-size: var(--text-3xs);}
  .\xl\:text-2xs {font-size: var(--text-2xs);}
  .\xl\:text-xs {font-size: var(--text-xs);}
  .\xl\:text-sm {font-size: var(--text-sm);}
  .\xl\:text-lg {font-size: var(--text-lg);}
  .\xl\:text-xl {font-size: var(--text-xl);}
  .\xl\:text-2xl {font-size: var(--text-2xl);}
  .\xl\:text-3xl {font-size: var(--text-3xl);}
  .\xl\:text-4xl {font-size: var(--text-4xl);}
  .\xl\:text-5xl {font-size: var(--text-5xl);}
  .\xl\:text-6xl {font-size: var(--text-6xl);}
  .\xl\:text-7xl {font-size: var(--text-7xl);}
  .\xl\:text-8xl {font-size: var(--text-8xl);}
}

@media (max-width: 1024px) {
  .\lg\:text-3xs {font-size: var(--text-3xs);}
  .\lg\:text-2xs {font-size: var(--text-2xs);}
  .\lg\:text-xs {font-size: var(--text-xs);}
  .\lg\:text-sm {font-size: var(--text-sm);}
  .\lg\:text-lg {font-size: var(--text-lg);}
  .\lg\:text-xl {font-size: var(--text-xl);}
  .\lg\:text-2xl {font-size: var(--text-2xl);}
  .\lg\:text-3xl {font-size: var(--text-3xl);}
  .\lg\:text-4xl {font-size: var(--text-4xl);}
  .\lg\:text-5xl {font-size: var(--text-5xl);}
  .\lg\:text-6xl {font-size: var(--text-6xl);}
  .\lg\:text-7xl {font-size: var(--text-7xl);}
  .\lg\:text-8xl {font-size: var(--text-8xl);}
}

@media (max-width: 768px) {
  .\md\:text-3xs {font-size: var(--text-3xs);}
  .\md\:text-2xs {font-size: var(--text-2xs);}
  .\md\:text-xs {font-size: var(--text-xs);}
  .\md\:text-sm {font-size: var(--text-sm);}
  .\md\:text-lg {font-size: var(--text-lg);}
  .\md\:text-xl {font-size: var(--text-xl);}
  .\md\:text-2xl {font-size: var(--text-2xl);}
  .\md\:text-3xl {font-size: var(--text-3xl);}
  .\md\:text-4xl {font-size: var(--text-4xl);}
  .\md\:text-5xl {font-size: var(--text-5xl);}
  .\md\:text-6xl {font-size: var(--text-6xl);}
  .\md\:text-7xl {font-size: var(--text-7xl);}
  .\md\:text-8xl {font-size: var(--text-8xl);}
}

@media (max-width: 500px) {
  .\sm\:text-3xs {font-size: var(--text-3xs);}
  .\sm\:text-2xs {font-size: var(--text-2xs);}
  .\sm\:text-xs {font-size: var(--text-xs);}
  .\sm\:text-sm {font-size: var(--text-sm);}
  .\sm\:text-lg {font-size: var(--text-lg);}
  .\sm\:text-xl {font-size: var(--text-xl);}
  .\sm\:text-2xl {font-size: var(--text-2xl);}
  .\sm\:text-3xl {font-size: var(--text-3xl);}
  .\sm\:text-4xl {font-size: var(--text-4xl);}
  .\sm\:text-5xl {font-size: var(--text-5xl);}
  .\sm\:text-6xl {font-size: var(--text-6xl);}
  .\sm\:text-7xl {font-size: var(--text-7xl);}
  .\sm\:text-8xl {font-size: var(--text-8xl);}
}

@media (max-width: 375px) {
  .\xs\:text-3xs {font-size: var(--text-3xs);}
  .\xs\:text-2xs {font-size: var(--text-2xs);}
  .\xs\:text-xs {font-size: var(--text-xs);}
  .\xs\:text-sm {font-size: var(--text-sm);}
  .\xs\:text-lg {font-size: var(--text-lg);}
  .\xs\:text-xl {font-size: var(--text-xl);}
  .\xs\:text-2xl {font-size: var(--text-2xl);}
  .\xs\:text-3xl {font-size: var(--text-3xl);}
  .\xs\:text-4xl {font-size: var(--text-4xl);}
  .\xs\:text-5xl {font-size: var(--text-5xl);}
  .\xs\:text-6xl {font-size: var(--text-6xl);}
  .\xs\:text-7xl {font-size: var(--text-7xl);}
  .\xs\:text-8xl {font-size: var(--text-8xl);}
}

.fw-100 {font-weight: 100;}
.fw-200 {font-weight: 200;}
.fw-300 {font-weight: 300;}
.fw-400 {font-weight: 400;}
.fw-500 {font-weight: 500;}
.fw-600 {font-weight: 600;}
.fw-700 {font-weight: 700;}
.fw-800 {font-weight: 800;}
.fw-900 {font-weight: 900;}

.opacity-0   { opacity: 0; }
.opacity-5   { opacity: 0.05; }
.opacity-10  { opacity: 0.10; }
.opacity-15  { opacity: 0.15; }
.opacity-20  { opacity: 0.20; }
.opacity-25  { opacity: 0.25; }
.opacity-30  { opacity: 0.30; }
.opacity-35  { opacity: 0.35; }
.opacity-40  { opacity: 0.40; }
.opacity-45  { opacity: 0.45; }
.opacity-50  { opacity: 0.50; }
.opacity-55  { opacity: 0.55; }
.opacity-60  { opacity: 0.60; }
.opacity-65  { opacity: 0.65; }
.opacity-70  { opacity: 0.70; }
.opacity-75  { opacity: 0.75; }
.opacity-80  { opacity: 0.80; }
.opacity-85  { opacity: 0.85; }
.opacity-90  { opacity: 0.90; }
.opacity-95  { opacity: 0.95; }
.opacity-100 { opacity: 1; }

.mt-auto {margin-top: auto;}
.mb-auto {margin-bottom: auto;}
.ml-auto {margin-left: auto;}
.mr-auto {margin-right: auto;}
.mx-auto {margin: 0 auto;}

@media(max-width:1536px){
  .\2xl\:mt-auto {margin-top: auto;}
  .\2xl\:mb-auto {margin-bottom: auto;}
  .\2xl\:ml-auto {margin-left: auto;}
  .\2xl\:mr-auto {margin-right: auto;}
  .\2xl\:mx-auto {margin: 0 auto;}
}

@media(max-width:1320px){
  .\xl\:mt-auto {margin-top: auto;}
  .\xl\:mb-auto {margin-bottom: auto;}
  .\xl\:ml-auto {margin-left: auto;}
  .\xl\:mr-auto {margin-right: auto;}
  .\xl\:mx-auto {margin: 0 auto;}
}

@media(max-width:1024px){
  .\lg\:mt-auto {margin-top: auto;}
  .\lg\:mb-auto {margin-bottom: auto;}
  .\lg\:ml-auto {margin-left: auto;}
  .\lg\:mr-auto {margin-right: auto;}
  .\lg\:mx-auto {margin: 0 auto;}
}

@media(max-width:768px){
  .\md\:mt-auto {margin-top: auto;}
  .\md\:mb-auto {margin-bottom: auto;}
  .\md\:ml-auto {margin-left: auto;}
  .\md\:mr-auto {margin-right: auto;}
  .\md\:mx-auto {margin: 0 auto;}
}

@media(max-width:500px){
  .\sm\:mt-auto {margin-top: auto;}
  .\sm\:mb-auto {margin-bottom: auto;}
  .\sm\:ml-auto {margin-left: auto;}
  .\sm\:mr-auto {margin-right: auto;}
  .\sm\:mx-auto {margin: 0 auto;}
}

@media(max-width:375px){
  .\xs\:mt-auto {margin-top: auto;}
  .\xs\:mb-auto {margin-bottom: auto;}
  .\xs\:ml-auto {margin-left: auto;}
  .\xs\:mr-auto {margin-right: auto;}
  .\xs\:mx-auto {margin: 0 auto;}
}

.ellipsis-1 { 
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.ellipsis-2 {
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;  
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ellipsis-3 {
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;  
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.lowercase { text-transform: lowercase; }
.uppercase {text-transform: uppercase;}
.capitalize {text-transform: capitalize;}

.block {display: block;}
.inline-block {display: inline-block;}
.flex {display: flex;}
.inline-flex {display: inline-flex;}
.grid {display: grid;}
.inline-grid {display: inline-grid;}
.hide {display: none;}

@media (max-width: 1536px) {
  .\2xl\:block {display: block;}
  .\2xl\:inline-block {display: inline-block;}
  .\2xl\:flex {display: flex;}
  .\2xl\:inline-flex {display: inline-flex;}
  .\2xl\:grid {display: flex;}
  .\2xl\:inline-grid {display: inline-flex;}
}

@media (max-width: 1320px) {
  .\xl\:block {display: block;}
  .\xl\:inline-block {display: inline-block;}
  .\xl\:flex {display: flex;}
  .\xl\:inline-flex {display: inline-flex;}
  .\xl\:grid {display: flex;}
  .\xl\:inline-grid {display: inline-flex;}
}

@media (max-width: 1024px) {
  .\lg\:block {display: block;}
  .\lg\:inline-block {display: inline-block;}
  .\lg\:flex {display: flex;}
  .\lg\:inline-flex {display: inline-flex;}
  .\lg\:grid {display: flex;}
  .\lg\:inline-grid {display: inline-flex;}
}

@media (max-width: 768px) {
  .\md\:block {display: block;}
  .\md\:inline-block {display: inline-block;}
  .\md\:flex {display: flex;}
  .\md\:inline-flex {display: inline-flex;}
  .\md\:grid {display: flex;}
  .\md\:inline-grid {display: inline-flex;}
}

@media (max-width: 500px) {
  .\sm\:block {display: block;}
  .\sm\:inline-block {display: inline-block;}
  .\sm\:flex {display: flex;}
  .\sm\:inline-flex {display: inline-flex;}
  .\sm\:grid {display: flex;}
  .\sm\:inline-grid {display: inline-flex;}
}

@media (max-width: 375px) {
  .\xs\:block {display: block;}
  .\xs\:inline-block {display: inline-block;}
  .\xs\:flex {display: flex;}
  .\xs\:inline-flex {display: inline-flex;}
  .\xs\:grid {display: flex;}
  .\xs\:inline-grid {display: inline-flex;}
}


.flex-row {flex-direction:row;}
.flex-col {flex-direction:column;}

@media (max-width: 1536px) {
  .\2xl\:flex-row {flex-direction:row;}
  .\2xl\:flex-col {flex-direction:column;}
}

@media (max-width: 1320px) {
  .\xl\:flex-row {flex-direction:row;}
  .\xl\:flex-col {flex-direction:column;}
}

@media (max-width: 1024px) {
  .\lg\:flex-row {flex-direction:row;}
  .\lg\:flex-col {flex-direction:column;}
}

@media (max-width: 768px) {
  .\md\:flex-row {flex-direction:row;}
  .\md\:flex-col {flex-direction:column;}
}

@media (max-width: 500px) {
  .\sm\:flex-row {flex-direction:row;}
  .\sm\:flex-col {flex-direction:column;}
}

@media (max-width: 375px) {
  .\xs\:flex-row {flex-direction:row;}
  .\xs\:flex-col {flex-direction:column;}
}

.text-left {text-align:left;}
.text-right {text-align:right;}
.text-center {text-align:center;}

@media (max-width: 1536px) {
  .\2xl\:text-left {text-align:left;}
  .\2xl\:text-right {text-align:right;}
  .\2xl\:text-center {text-align:center;}
}

@media (max-width: 1320px) {
  .\xl\:text-left {text-align:left;}
  .\xl\:text-right {text-align:right;}
  .\xl\:text-center {text-align:center;}
}

@media (max-width: 1024px) {
  .\lg\:text-left {text-align:left;}
  .\lg\:text-right {text-align:right;}
  .\lg\:text-center {text-align:center;}
}

@media (max-width: 768px) {
  .\md\:text-left {text-align:left;}
  .\md\:text-right {text-align:right;}
  .\md\:text-center {text-align:center;}
}

@media (max-width: 500px) {
  .\sm\:text-left {text-align:left;}
  .\sm\:text-right {text-align:right;}
  .\sm\:text-center {text-align:center;}
}

@media (max-width: 375px) {
  .\xs\:text-left {text-align:left;}
  .\xs\:text-right {text-align:right;}
  .\xs\:text-center {text-align:center;}
}

.ls-tightest {letter-spacing: -0.05em; }
.ls-tighter {letter-spacing: -0.03em; }
.ls-tight {letter-spacing: -0.01em; }
.ls-wide {letter-spacing: 0.01em; }
.ls-wider {letter-spacing: 0.03em; }
.ls-widest {letter-spacing: 0.05em; }

.lh-100 {line-height: 1}
.lh-110 {line-height: 1.1}
.lh-120 {line-height: 1.2}
.lh-130 {line-height: 1.3}
.lh-140 {line-height: 1.4}
.lh-150 {line-height: 1.5}
.lh-160 {line-height: 1.6}
.lh-170 {line-height: 1.7}
.lh-180 {line-height: 1.8}
.lh-190 {line-height: 1.9}
.lh-200 {line-height: 2}

.align-baseline { vertical-align: baseline; }
.align-top { vertical-align: top; }
.align-middle { vertical-align: middle; }
.align-bottom { vertical-align: bottom; }

.italic { font-style: italic; }

.underline { text-decoration: underline; }
.line-through { text-decoration: line-through; }

.break-words { word-wrap: break-word; }
.break-all { word-break: break-all; }
.whitespace-nowrap { white-space: nowrap; }

.bg-white {background-color: #fff;}
.bg-primary {background-color: var(--primary);}
.bg-secondary {background-color: var(--secondary);}
.bg-third {background-color: var(--third);}
.bg-gray-50 {background-color: var(--gray-50);}
.bg-gray-100 {background-color: var(--gray-100);}
.bg-gray-200 {background-color: var(--gray-200);}
.bg-gray-300 {background-color: var(--gray-300);}
.bg-gray-400 {background-color: var(--gray-400);}
.bg-gray-500 {background-color: var(--gray-500);}
.bg-gray-600 {background-color: var(--gray-600);}
.bg-gray-700 {background-color: var(--gray-700);}
.bg-gray-800 {background-color: var(--gray-800);}
.bg-gray-900 {background-color: var(--gray-900);}

.cursor-pointer {cursor: pointer;}

.pointer-events-none {pointer-events: none;}
 
.flex-wrap {flex-wrap:wrap;}
.flex-nowrap {flex-wrap:nowrap;}

.justify-start {justify-content: flex-start;}
.justify-center {justify-content: center;}
.justify-end {justify-content: flex-end;}
.justify-between {justify-content: space-between;}

@media (max-width: 1536px) {
  .\2xl\:justify-start {justify-content: flex-start;}
  .\2xl\:justify-center {justify-content: center;}
  .\2xl\:justify-end {justify-content: flex-end;}
  .\2xl\:justify-between {justify-content: space-between;}
}

@media (max-width: 1320px) {
  .\xl\:justify-start {justify-content: flex-start;}
  .\xl\:justify-center {justify-content: center;}
  .\xl\:justify-end {justify-content: flex-end;}
  .\xl\:justify-between {justify-content: space-between;}
}

@media (max-width: 1024px) {
  .\lg\:justify-start {justify-content: flex-start;}
  .\lg\:justify-center {justify-content: center;}
  .\lg\:justify-end {justify-content: flex-end;}
  .\lg\:justify-between {justify-content: space-between;}
}

@media (max-width: 768px) {
  .\md\:justify-start {justify-content: flex-start;}
  .\md\:justify-center {justify-content: center;}
  .\md\:justify-end {justify-content: flex-end;}
  .\md\:justify-between {justify-content: space-between;}
}

@media (max-width: 500px) {
  .\sm\:justify-start {justify-content: flex-start;}
  .\sm\:justify-center {justify-content: center;}
  .\sm\:justify-end {justify-content: flex-end;}
  .\sm\:justify-between {justify-content: space-between;}
}

@media (max-width: 375px) {
  .\xs\:justify-start {justify-content: flex-start;}
  .\xs\:justify-center {justify-content: center;}
  .\xs\:justify-end {justify-content: flex-end;}
  .\xs\:justify-between {justify-content: space-between;}
}

.items-stretch {align-items: stretch;}
.items-start {align-items: flex-start;}
.items-center {align-items: center;}
.items-end {align-items: flex-end;}

@media (max-width: 1536px) {
  .\2xl\:items-stretch {align-items: stretch;}
  .\2xl\:items-start {align-items: flex-start;}
  .\2xl\:items-center {align-items: center;}
  .\2xl\:items-end {align-items: flex-end;}
}

@media (max-width: 1320px) {
  .\xl\:items-stretch {align-items: stretch;}
  .\xl\:items-start {align-items: flex-start;}
  .\xl\:items-center {align-items: center;}
  .\xl\:items-end {align-items: flex-end;}
}

@media (max-width: 1024px) {
  .\lg\:items-stretch {align-items: stretch;}
  .\lg\:items-start {align-items: flex-start;}
  .\lg\:items-center {align-items: center;}
  .\lg\:items-end {align-items: flex-end;}
}

@media (max-width: 768px) {
  .\md\:items-stretch {align-items: stretch;}
  .\md\:items-start {align-items: flex-start;}
  .\md\:items-center {align-items: center;}
  .\md\:items-end {align-items: flex-end;}
}

@media (max-width: 500px) {
  .\sm\:items-stretch {align-items: stretch;}
  .\sm\:items-start {align-items: flex-start;}
  .\sm\:items-center {align-items: center;}
  .\sm\:items-end {align-items: flex-end;}
}

@media (max-width: 375px) {
  .\xs\:items-stretch {align-items: stretch;}
  .\xs\:items-start {align-items: flex-start;}
  .\xs\:items-center {align-items: center;}
  .\xs\:items-end {align-items: flex-end;}
}

.gap-1 {gap:0.25rem}
.gap-2 {gap:0.5rem}
.gap-3 {gap:0.75rem}
.gap-4 {gap:1rem}
.gap-5 {gap:1.25rem}
.gap-6 {gap:1.5rem}
.gap-7 {gap:1.75rem}
.gap-8 {gap:2rem}
.gap-9 {gap:2.25rem}
.gap-10 {gap:2.5rem}
.gap-15 {gap:3.75rem}
.gap-20 {gap:5rem}

.gap-x-1 {column-gap:0.25rem}
.gap-x-2 {column-gap:0.5rem}
.gap-x-3 {column-gap:0.75rem}
.gap-x-4 {column-gap:1rem}
.gap-x-5 {column-gap:1.25rem}
.gap-x-6 {column-gap:1.5rem}
.gap-x-7 {column-gap:1.75rem}
.gap-x-8 {column-gap:2rem}
.gap-x-9 {column-gap:2.25rem}
.gap-x-10 {column-gap:2.5rem}
.gap-x-15 {column-gap:3.75rem}
.gap-x-20 {column-gap:5rem}

.gap-y-1 {row-gap:0.25rem}
.gap-y-2 {row-gap:0.5rem}
.gap-y-3 {row-gap:0.75rem}
.gap-y-4 {row-gap:1rem}
.gap-y-5 {row-gap:1.25rem}
.gap-y-6 {row-gap:1.5rem}
.gap-y-7 {row-gap:1.75rem}
.gap-y-8 {row-gap:2rem}
.gap-y-9 {row-gap:2.25rem}
.gap-y-10 {row-gap:2.5rem}
.gap-y-15 {row-gap:3.75rem}
.gap-y-20 {row-gap:5rem}

.p-0 {padding:0}
.p-1 {padding:0.25rem}
.p-2 {padding:0.5rem}
.p-3 {padding:0.75rem}
.p-4 {padding:1rem}
.p-5 {padding:1.25rem}
.p-6 {padding:1.5rem}
.p-7 {padding:1.75rem}
.p-8 {padding:2rem}
.p-9 {padding:2.25rem}
.p-10 {padding:2.5rem}
.p-15 {padding:3.75rem}
.p-20 {padding:5rem}

.px-1 {padding:0 0;}
.px-1 {padding:0 0.25rem;}
.px-2 {padding:0 0.5rem;}
.px-3 {padding:0 0.75rem;}
.px-4 {padding:0 1rem;}
.px-5 {padding:0 1.25rem;}
.px-6 {padding:0 1.5rem;}
.px-7 {padding:0 1.75rem;}
.px-8 {padding:0 2rem;}
.px-9 {padding:0 2.25rem;}
.px-10 {padding:0 2.5rem;}
.px-15 {padding:0 3.75rem;}
.px-20 {padding:0 5rem;}

.py-0 {padding:0 0;}
.py-1 {padding:0.25rem 0;}
.py-2 {padding:0.5rem 0;}
.py-3 {padding:0.75rem 0;}
.py-4 {padding:1rem 0;}
.py-5 {padding:1.25rem 0;}
.py-6 {padding:1.5rem 0;}
.py-7 {padding:1.75rem 0;}
.py-8 {padding:2rem 0;}
.py-9 {padding:2.25rem 0;}
.py-10 {padding:2.5rem 0;}
.py-15 {padding:3.75rem 0;}
.py-20 {padding:5rem 0;}

.pb-0 {padding-bottom: 0;}


.w-0 {width: 0;}
.w-auto {width: auto;}
.w-full {width: 100%;}
.w-vw {width: 100vw;}
.w-min {width:min-content;}
.w-max {width:max-content;}

@media (max-width: 1536px) {
  .\2xl\:w-0 {width: 0;}
  .\2xl\:w-auto {width: auto;}
  .\2xl\:w-full {width: 100%;}
  .\2xl\:w-vw {width: 100vw;}
  .\2xl\:w-min {width:min-content;}
  .\2xl\:w-max {width:max-content;}
}

@media (max-width: 1320px) {
  .\xl\:w-0 {width: 0;}
  .\xl\:w-auto {width: auto;}
  .\xl\:w-full {width: 100%;}
  .\xl\:w-vw {width: 100vw;}
  .\xl\:w-min {width:min-content;}
  .\xl\:w-max {width:max-content;}
}

@media (max-width: 1024px) {
  .\lg\:w-0 {width: 0;}
  .\lg\:w-auto {width: auto;}
  .\lg\:w-full {width: 100%;}
  .\lg\:w-vw {width: 100vw;}
  .\lg\:w-min {width:min-content;}
  .\lg\:w-max {width:max-content;}
}

@media (max-width: 768px) {
  .\md\:w-0 {width: 0;}
  .\md\:w-auto {width: auto;}
  .\md\:w-full {width: 100%;}
  .\md\:w-vw {width: 100vw;}
  .\md\:w-min {width:min-content;}
  .\md\:w-max {width:max-content;}
}

@media (max-width: 500px) {
  .\sm\:w-0 {width: 0;}
  .\sm\:w-auto {width: auto;}
  .\sm\:w-full {width: 100%;}
  .\sm\:w-vw {width: 100vw;}
  .\sm\:w-min {width:min-content;}
  .\sm\:w-max {width:max-content;}
}

@media (max-width: 375px) {
  .\xs\:w-0 {width: 0;}
  .\xs\:w-auto {width: auto;}
  .\xs\:w-full {width: 100%;}
  .\xs\:w-vw {width: 100vw;}
  .\xs\:w-min {width:min-content;}
  .\xs\:w-max {width:max-content;}
}

.min-w-0 {min-width: 0;}
.min-w-auto {min-width: auto;}
.min-w-full {min-width: 100%;}
.min-w-vw {min-width: 100vw;}
.min-w-min {min-width:min-content;}
.min-w-max {min-width:max-content;}

@media (max-width: 1536px) {
  .\2xl\:min-w-0 {min-width: 0;}
  .\2xl\:min-w-auto {min-width: auto;}
  .\2xl\:min-w-full {min-width: 100%;}
  .\2xl\:min-w-vw {min-width: 100vw;}
  .\2xl\:min-w-min {min-width:min-content;}
  .\2xl\:min-w-max {min-width:max-content;}
}

@media (max-width: 1320px) {
  .\xl\:min-w-0 {min-width: 0;}
  .\xl\:min-w-auto {min-width: auto;}
  .\xl\:min-w-full {min-width: 100%;}
  .\xl\:min-w-vw {min-width: 100vw;}
  .\xl\:min-w-min {min-width:min-content;}
  .\xl\:min-w-max {min-width:max-content;}
}

@media (max-width: 1024px) {
  .\lg\:min-w-0 {min-width: 0;}
  .\lg\:min-w-auto {min-width: auto;}
  .\lg\:min-w-full {min-width: 100%;}
  .\lg\:min-w-vw {min-width: 100vw;}
  .\lg\:min-w-min {min-width:min-content;}
  .\lg\:min-w-max {min-width:max-content;}
}

@media (max-width: 768px) {
  .\md\:min-w-0 {min-width: 0;}
  .\md\:min-w-auto {min-width: auto;}
  .\md\:min-w-full {min-width: 100%;}
  .\md\:min-w-vw {min-width: 100vw;}
  .\md\:min-w-min {min-width:min-content;}
  .\md\:min-w-max {min-width:max-content;}
}

@media (max-width: 500px) {
  .\sm\:min-w-0 {min-width: 0;}
  .\sm\:min-w-auto {min-width: auto;}
  .\sm\:min-w-full {min-width: 100%;}
  .\sm\:min-w-vw {min-width: 100vw;}
  .\sm\:min-w-min {min-width:min-content;}
  .\sm\:min-w-max {min-width:max-content;}
}

@media (max-width: 375px) {
  .\xs\:min-w-0 {min-width: 0;}
  .\xs\:min-w-auto {min-width: auto;}
  .\xs\:min-w-full {min-width: 100%;}
  .\xs\:min-w-vw {min-width: 100vw;}
  .\xs\:min-w-min {min-width:min-content;}
  .\xs\:min-w-max {min-width:max-content;}
}

.max-w-0 {max-width: 0;}
.max-w-auto {max-width: auto;}
.max-w-full {max-width: 100%;}
.max-w-vw {max-width: 100vw;}
.max-w-min {max-width:min-content;}
.max-w-max {max-width:max-content;}

@media (max-width: 1536px) {
  .\2xl\:max-w-0 {max-width: 0;}
  .\2xl\:max-w-auto {max-width: auto;}
  .\2xl\:max-w-full {max-width: 100%;}
  .\2xl\:max-w-vw {max-width: 100vw;}
  .\2xl\:max-w-min {max-width:min-content;}
  .\2xl\:max-w-max {max-width:max-content;}
}

@media (max-width: 1320px) {
  .\xl\:max-w-0 {max-width: 0;}
  .\xl\:max-w-auto {max-width: auto;}
  .\xl\:max-w-full {max-width: 100%;}
  .\xl\:max-w-vw {max-width: 100vw;}
  .\xl\:max-w-min {max-width:min-content;}
  .\xl\:max-w-max {max-width:max-content;}
}

@media (max-width: 1024px) {
  .\lg\:max-w-0 {max-width: 0;}
  .\lg\:max-w-auto {max-width: auto;}
  .\lg\:max-w-full {max-width: 100%;}
  .\lg\:max-w-vw {max-width: 100vw;}
  .\lg\:max-w-min {max-width:min-content;}
  .\lg\:max-w-max {max-width:max-content;}
}

@media (max-width: 768px) {
  .\md\:max-w-0 {max-width: 0;}
  .\md\:max-w-auto {max-width: auto;}
  .\md\:max-w-full {max-width: 100%;}
  .\md\:max-w-vw {max-width: 100vw;}
  .\md\:max-w-min {max-width:min-content;}
  .\md\:max-w-max {max-width:max-content;}
}

@media (max-width: 500px) {
  .\sm\:max-w-0 {max-width: 0;}
  .\sm\:max-w-auto {max-width: auto;}
  .\sm\:max-w-full {max-width: 100%;}
  .\sm\:max-w-vw {max-width: 100vw;}
  .\sm\:max-w-min {max-width:min-content;}
  .\sm\:max-w-max {max-width:max-content;}
}

@media (max-width: 375px) {
  .\xs\:max-w-0 {max-width: 0;}
  .\xs\:max-w-auto {max-width: auto;}
  .\xs\:max-w-full {max-width: 100%;}
  .\xs\:max-w-vw {max-width: 100vw;}
  .\xs\:max-w-min {max-width:min-content;}
  .\xs\:max-w-max {max-width:max-content;}
}

.h-0 {height: 0;}
.h-auto {height: auto;}
.h-full {height: 100%;}
.h-vh {height: 100vh;}
.h-dvh {height: 100dvh;}
.h-svh {height: 100svh;}
.h-lvh {height: 100lvh;}
.h-min {height:min-content;}
.h-max {height:max-content;}

@media (max-width: 1536px) {
  .\2xl\h-0 {height: 0;}
  .\2xl\h-auto {height: auto;}
  .\2xl\h-full {height: 100%;}
  .\2xl\h-vh {height: 100vh;}
  .\2xl\h-dvh {height: 100dvh;}
  .\2xl\h-svh {height: 100svh;}
  .\2xl\h-lvh {height: 100lvh;}
  .\2xl\h-min {height:min-content;}
  .\2xl\h-max {height:max-content;}
}

@media (max-width: 1320px) {
  .\xl\h-0 {height: 0;}
  .\xl\h-auto {height: auto;}
  .\xl\h-full {height: 100%;}
  .\xl\h-vh {height: 100vh;}
  .\xl\h-dvh {height: 100dvh;}
  .\xl\h-svh {height: 100svh;}
  .\xl\h-lvh {height: 100lvh;}
  .\xl\h-min {height:min-content;}
  .\xl\h-max {height:max-content;}
}

@media (max-width: 1024px) {
  .\lg\h-0 {height: 0;}
  .\lg\h-auto {height: auto;}
  .\lg\h-full {height: 100%;}
  .\lg\h-vh {height: 100vh;}
  .\lg\h-dvh {height: 100dvh;}
  .\lg\h-svh {height: 100svh;}
  .\lg\h-lvh {height: 100lvh;}
  .\lg\h-min {height:min-content;}
  .\lg\h-max {height:max-content;}
}

@media (max-width: 768px) {
  .\md\h-0 {height: 0;}
  .\md\h-auto {height: auto;}
  .\md\h-full {height: 100%;}
  .\md\h-vh {height: 100vh;}
  .\md\h-dvh {height: 100dvh;}
  .\md\h-svh {height: 100svh;}
  .\md\h-lvh {height: 100lvh;}
  .\md\h-min {height:min-content;}
  .\md\h-max {height:max-content;}
}

@media (max-width: 500px) {
  .\sm\h-0 {height: 0;}
  .\sm\h-auto {height: auto;}
  .\sm\h-full {height: 100%;}
  .\sm\h-vh {height: 100vh;}
  .\sm\h-dvh {height: 100dvh;}
  .\sm\h-svh {height: 100svh;}
  .\sm\h-lvh {height: 100lvh;}
  .\sm\h-min {height:min-content;}
  .\sm\h-max {height:max-content;}
}

@media (max-width: 375px) {
  .\xs\h-0 {height: 0;}
  .\xs\h-auto {height: auto;}
  .\xs\h-full {height: 100%;}
  .\xs\h-vh {height: 100vh;}
  .\xs\h-dvh {height: 100dvh;}
  .\xs\h-svh {height: 100svh;}
  .\xs\h-lvh {height: 100lvh;}
  .\xs\h-min {height:min-content;}
  .\xs\h-max {height:max-content;}
}

.min-h-0 {min-height: 0;}
.min-h-auto {min-height: auto;}
.min-h-full {min-height: 100%;}
.min-h-vh {min-height: 100vh;}
.min-h-dvh {min-height: 100dvh;}
.min-h-svh {min-height: 100svh;}
.min-h-lvh {min-height: 100lvh;}
.min-h-min {min-height:min-content;}
.min-h-max {min-height:max-content;}

@media (max-width: 1536px) {
  .\2xl\min-h-0 {min-height: 0;}
  .\2xl\min-h-auto {min-height: auto;}
  .\2xl\min-h-full {min-height: 100%;}
  .\2xl\min-h-vh {min-height: 100vh;}
  .\2xl\min-h-dvh {min-height: 100dvh;}
  .\2xl\min-h-svh {min-height: 100svh;}
  .\2xl\min-h-lvh {min-height: 100lvh;}
  .\2xl\min-h-min {min-height:min-content;}
  .\2xl\min-h-max {min-height:max-content;}
}

@media (max-width: 1320px) {
  .\xl\min-h-0 {min-height: 0;}
  .\xl\min-h-auto {min-height: auto;}
  .\xl\min-h-full {min-height: 100%;}
  .\xl\min-h-vh {min-height: 100vh;}
  .\xl\min-h-dvh {min-height: 100dvh;}
  .\xl\min-h-svh {min-height: 100svh;}
  .\xl\min-h-lvh {min-height: 100lvh;}
  .\xl\min-h-min {min-height:min-content;}
  .\xl\min-h-max {min-height:max-content;}
}

@media (max-width: 1024px) {
  .\lg\min-h-0 {min-height: 0;}
  .\lg\min-h-auto {min-height: auto;}
  .\lg\min-h-full {min-height: 100%;}
  .\lg\min-h-vh {min-height: 100vh;}
  .\lg\min-h-dvh {min-height: 100dvh;}
  .\lg\min-h-svh {min-height: 100svh;}
  .\lg\min-h-lvh {min-height: 100lvh;}
  .\lg\min-h-min {min-height:min-content;}
  .\lg\min-h-max {min-height:max-content;}
}

@media (max-width: 768px) {
  .\md\min-h-0 {min-height: 0;}
  .\md\min-h-auto {min-height: auto;}
  .\md\min-h-full {min-height: 100%;}
  .\md\min-h-vh {min-height: 100vh;}
  .\md\min-h-dvh {min-height: 100dvh;}
  .\md\min-h-svh {min-height: 100svh;}
  .\md\min-h-lvh {min-height: 100lvh;}
  .\md\min-h-min {min-height:min-content;}
  .\md\min-h-max {min-height:max-content;}
}

@media (max-width: 500px) {
  .\sm\min-h-0 {min-height: 0;}
  .\sm\min-h-auto {min-height: auto;}
  .\sm\min-h-full {min-height: 100%;}
  .\sm\min-h-vh {min-height: 100vh;}
  .\sm\min-h-dvh {min-height: 100dvh;}
  .\sm\min-h-svh {min-height: 100svh;}
  .\sm\min-h-lvh {min-height: 100lvh;}
  .\sm\min-h-min {min-height:min-content;}
  .\sm\min-h-max {min-height:max-content;}
}

@media (max-width: 375px) {
  .\xs\min-h-0 {min-height: 0;}
  .\xs\min-h-auto {min-height: auto;}
  .\xs\min-h-full {min-height: 100%;}
  .\xs\min-h-vh {min-height: 100vh;}
  .\xs\min-h-dvh {min-height: 100dvh;}
  .\xs\min-h-svh {min-height: 100svh;}
  .\xs\min-h-lvh {min-height: 100lvh;}
  .\xs\min-h-min {min-height:min-content;}
  .\xs\min-h-max {min-height:max-content;}
}

.max-h-0 {max-height:0;}
.max-h-auto {max-height: auto;}
.max-h-full {max-height: 100%;}
.max-h-vh {max-height: 100vh;}
.max-h-dvh {max-height: 100dvh;}
.max-h-svh {max-height: 100svh;}
.max-h-lvh {max-height: 100lvh;}
.max-h-min {max-height:min-content;}
.max-h-max {max-height:max-content;}

@media(max-width:1536px){
  .\2xl\max-h-0 {max-height:0;}
  .\2xl\max-h-auto {max-height: auto;}
  .\2xl\max-h-full {max-height: 100%;}
  .\2xl\max-h-vh {max-height: 100vh;}
  .\2xl\max-h-dvh {max-height: 100dvh;}
  .\2xl\max-h-svh {max-height: 100svh;}
  .\2xl\max-h-lvh {max-height: 100lvh;}
  .\2xl\max-h-min {max-height:min-content;}
  .\2xl\max-h-max {max-height:max-content;}
}

@media(max-width:1320px){
  .\xl\max-h-0 {max-height:0;}
  .\xl\max-h-auto {max-height: auto;}
  .\xl\max-h-full {max-height: 100%;}
  .\xl\max-h-vh {max-height: 100vh;}
  .\xl\max-h-dvh {max-height: 100dvh;}
  .\xl\max-h-svh {max-height: 100svh;}
  .\xl\max-h-lvh {max-height: 100lvh;}
  .\xl\max-h-min {max-height:min-content;}
  .\xl\max-h-max {max-height:max-content;}
}

@media(max-width:1024px){
  .\lg\max-h-0 {max-height:0;}
  .\lg\max-h-auto {max-height: auto;}
  .\lg\max-h-full {max-height: 100%;}
  .\lg\max-h-vh {max-height: 100vh;}
  .\lg\max-h-dvh {max-height: 100dvh;}
  .\lg\max-h-svh {max-height: 100svh;}
  .\lg\max-h-lvh {max-height: 100lvh;}
  .\lg\max-h-min {max-height:min-content;}
  .\lg\max-h-max {max-height:max-content;}
}

@media(max-width:768px){
  .\md\max-h-0 {max-height:0;}
  .\md\max-h-auto {max-height: auto;}
  .\md\max-h-full {max-height: 100%;}
  .\md\max-h-vh {max-height: 100vh;}
  .\md\max-h-dvh {max-height: 100dvh;}
  .\md\max-h-svh {max-height: 100svh;}
  .\md\max-h-lvh {max-height: 100lvh;}
  .\md\max-h-min {max-height:min-content;}
  .\md\max-h-max {max-height:max-content;}
}

@media(max-width:500px){
  .\sm\max-h-0 {max-height:0;}
  .\sm\max-h-auto {max-height: auto;}
  .\sm\max-h-full {max-height: 100%;}
  .\sm\max-h-vh {max-height: 100vh;}
  .\sm\max-h-dvh {max-height: 100dvh;}
  .\sm\max-h-svh {max-height: 100svh;}
  .\sm\max-h-lvh {max-height: 100lvh;}
  .\sm\max-h-min {max-height:min-content;}
  .\sm\max-h-max {max-height:max-content;}
}

@media(max-width:375px){
  .\xs\max-h-0 {max-height:0;}
  .\xs\max-h-auto {max-height: auto;}
  .\xs\max-h-full {max-height: 100%;}
  .\xs\max-h-vh {max-height: 100vh;}
  .\xs\max-h-dvh {max-height: 100dvh;}
  .\xs\max-h-svh {max-height: 100svh;}
  .\xs\max-h-lvh {max-height: 100lvh;}
  .\xs\max-h-min {max-height:min-content;}
  .\xs\max-h-max {max-height:max-content;}
}

.flex-0 {flex:0;}
.flex-1 {flex:1;}
.flex-2 {flex:2;}
.flex-3 {flex:3;}
.flex-4 {flex:4;}
.flex-5 {flex:5;}
.flex-6 {flex:6;}
.flex-7 {flex:7;}
.flex-8 {flex:8;}
.flex-none {flex:none;}

@media (max-width: 1536px) {
  .\2xl\:flex-0 {flex:0;}
  .\2xl\:flex-1 {flex:1;}
  .\2xl\:flex-2 {flex:2;}
  .\2xl\:flex-3 {flex:3;}
  .\2xl\:flex-4 {flex:4;}
  .\2xl\:flex-5 {flex:5;}
  .\2xl\:flex-6 {flex:6;}
  .\2xl\:flex-7 {flex:7;}
  .\2xl\:flex-8 {flex:8;}
  .\2xl\:flex-none {flex:none;}
}

@media (max-width: 1320px) {
  .\xl\:flex-0 {flex:0;}
  .\xl\:flex-1 {flex:1;}
  .\xl\:flex-2 {flex:2;}
  .\xl\:flex-3 {flex:3;}
  .\xl\:flex-4 {flex:4;}
  .\xl\:flex-5 {flex:5;}
  .\xl\:flex-6 {flex:6;}
  .\xl\:flex-7 {flex:7;}
  .\xl\:flex-8 {flex:8;}
  .\xl\:flex-none {flex:none;}
}

@media (max-width: 1024px) {
  .\lg\:flex-0 {flex:0;}
  .\lg\:flex-1 {flex:1;}
  .\lg\:flex-2 {flex:2;}
  .\lg\:flex-3 {flex:3;}
  .\lg\:flex-4 {flex:4;}
  .\lg\:flex-5 {flex:5;}
  .\lg\:flex-6 {flex:6;}
  .\lg\:flex-7 {flex:7;}
  .\lg\:flex-8 {flex:8;}
  .\lg\:flex-none {flex:none;}
}

@media (max-width: 768px) {
  .\md\:flex-0 {flex:0;}
  .\md\:flex-1 {flex:1;}
  .\md\:flex-2 {flex:2;}
  .\md\:flex-3 {flex:3;}
  .\md\:flex-4 {flex:4;}
  .\md\:flex-5 {flex:5;}
  .\md\:flex-6 {flex:6;}
  .\md\:flex-7 {flex:7;}
  .\md\:flex-8 {flex:8;}
  .\md\:flex-none {flex:none;}
}

@media (max-width: 500px) {
  .\sm\:flex-0 {flex:0;}
  .\sm\:flex-1 {flex:1;}
  .\sm\:flex-2 {flex:2;}
  .\sm\:flex-3 {flex:3;}
  .\sm\:flex-4 {flex:4;}
  .\sm\:flex-5 {flex:5;}
  .\sm\:flex-6 {flex:6;}
  .\sm\:flex-7 {flex:7;}
  .\sm\:flex-8 {flex:8;}
  .\sm\:flex-none {flex:none;}
}

@media (max-width: 375px) {
  .\xs\:flex-0 {flex:0;}
  .\xs\:flex-1 {flex:1;}
  .\xs\:flex-2 {flex:2;}
  .\xs\:flex-3 {flex:3;}
  .\xs\:flex-4 {flex:4;}
  .\xs\:flex-5 {flex:5;}
  .\xs\:flex-6 {flex:6;}
  .\xs\:flex-7 {flex:7;}
  .\xs\:flex-8 {flex:8;}
  .\xs\:flex-none {flex:none;}
}

.shadow-1 {box-shadow:var(--shadow-1)}
.shadow-2 {box-shadow:var(--shadow-2)}
.shadow-3 {box-shadow:var(--shadow-3)}
.shadow-4 {box-shadow:var(--shadow-4)}
.shadow-5 {box-shadow:var(--shadow-5)}
.shadow-6 {box-shadow:var(--shadow-6)}

.shrink-0 {flex-shrink: 0;}
.shrink-1 {flex-shrink: 1;}

.grid-col-1 {grid-template-columns: 1fr;}
.grid-col-2 {grid-template-columns: repeat(2, 1fr);}
.grid-col-3 {grid-template-columns: repeat(3, 1fr);}
.grid-col-4 {grid-template-columns: repeat(4, 1fr);}
.grid-col-5 {grid-template-columns: repeat(5, 1fr);}
.grid-col-6 {grid-template-columns: repeat(6, 1fr);}
.grid-col-7 {grid-template-columns: repeat(7, 1fr);}
.grid-col-8 {grid-template-columns: repeat(8, 1fr);}

@media (max-width: 1536px) {
  .\2xl\:grid-col-1 { grid-template-columns: repeat(1, 1fr); }
  .\2xl\:grid-col-2 { grid-template-columns: repeat(2, 1fr); }
  .\2xl\:grid-col-3 { grid-template-columns: repeat(3, 1fr); }
  .\2xl\:grid-col-4 { grid-template-columns: repeat(4, 1fr); }
  .\2xl\:grid-col-5 { grid-template-columns: repeat(5, 1fr); }
  .\2xl\:grid-col-6 { grid-template-columns: repeat(6, 1fr); }
  .\2xl\:grid-col-7 { grid-template-columns: repeat(7, 1fr); }
  .\2xl\:grid-col-8 { grid-template-columns: repeat(8, 1fr); }
}

@media (max-width: 1320px) {
  .xl\:grid-col-1 { grid-template-columns: repeat(1, 1fr); }
  .xl\:grid-col-2 { grid-template-columns: repeat(2, 1fr); }
  .xl\:grid-col-3 { grid-template-columns: repeat(3, 1fr); }
  .xl\:grid-col-4 { grid-template-columns: repeat(4, 1fr); }
  .xl\:grid-col-5 { grid-template-columns: repeat(5, 1fr); }
  .xl\:grid-col-6 { grid-template-columns: repeat(6, 1fr); }
  .xl\:grid-col-7 { grid-template-columns: repeat(7, 1fr); }
  .xl\:grid-col-8 { grid-template-columns: repeat(8, 1fr); }
}

@media (max-width: 1024px) {
  .lg\:grid-col-1 { grid-template-columns: repeat(1, 1fr); }
  .lg\:grid-col-2 { grid-template-columns: repeat(2, 1fr); }
  .lg\:grid-col-3 { grid-template-columns: repeat(3, 1fr); }
  .lg\:grid-col-4 { grid-template-columns: repeat(4, 1fr); }
  .lg\:grid-col-5 { grid-template-columns: repeat(5, 1fr); }
  .lg\:grid-col-6 { grid-template-columns: repeat(6, 1fr); }
  .lg\:grid-col-7 { grid-template-columns: repeat(7, 1fr); }
  .lg\:grid-col-8 { grid-template-columns: repeat(8, 1fr); }
}

@media (max-width: 768px) {
  .md\:grid-col-1 { grid-template-columns: repeat(1, 1fr); }
  .md\:grid-col-2 { grid-template-columns: repeat(2, 1fr); }
  .md\:grid-col-3 { grid-template-columns: repeat(3, 1fr); }
  .md\:grid-col-4 { grid-template-columns: repeat(4, 1fr); }
  .md\:grid-col-5 { grid-template-columns: repeat(5, 1fr); }
  .md\:grid-col-6 { grid-template-columns: repeat(6, 1fr); }
  .md\:grid-col-7 { grid-template-columns: repeat(7, 1fr); }
  .md\:grid-col-8 { grid-template-columns: repeat(8, 1fr); }
}

@media (max-width: 500px) {
  .sm\:grid-col-1 { grid-template-columns: repeat(1, 1fr); }
  .sm\:grid-col-2 { grid-template-columns: repeat(2, 1fr); }
  .sm\:grid-col-3 { grid-template-columns: repeat(3, 1fr); }
  .sm\:grid-col-4 { grid-template-columns: repeat(4, 1fr); }
  .sm\:grid-col-5 { grid-template-columns: repeat(5, 1fr); }
  .sm\:grid-col-6 { grid-template-columns: repeat(6, 1fr); }
  .sm\:grid-col-7 { grid-template-columns: repeat(7, 1fr); }
  .sm\:grid-col-8 { grid-template-columns: repeat(8, 1fr); }
}

@media (max-width: 375px) {
  .xs\:grid-col-1 { grid-template-columns: repeat(1, 1fr); }
  .xs\:grid-col-2 { grid-template-columns: repeat(2, 1fr); }
  .xs\:grid-col-3 { grid-template-columns: repeat(3, 1fr); }
  .xs\:grid-col-4 { grid-template-columns: repeat(4, 1fr); }
  .xs\:grid-col-5 { grid-template-columns: repeat(5, 1fr); }
  .xs\:grid-col-6 { grid-template-columns: repeat(6, 1fr); }
  .xs\:grid-col-7 { grid-template-columns: repeat(7, 1fr); }
  .xs\:grid-col-8 { grid-template-columns: repeat(8, 1fr); }
}

.aspect-square {aspect-ratio:1;}
.aspect-16-9 {aspect-ratio:16/9;}


.static {position: static;}
.relative {position: relative;}
.absolute {position: absolute;}
.fixed {position: fixed;}
.sticky {position: sticky;}

.top-full {top: 100%;}

.abs-x-center {
  left: 50%; 
  transform:translateX(-50%);
}

.rounded {
  border-radius:var(--rounded)
}

.rounded-md {
  border-radius:var(--rounded-md)
}

.rounded-lg {
  border-radius:var(--rounded-lg)
}

.rounded-xl {
  border-radius:var(--rounded-xl)
}

.rounded-2xl {
  border-radius:var(--rounded-2xl)
}

.rounded-full {
  border-radius:var(--rounded-full)
}