/******* Do not edit this file *******
Code Snippets Manager
Saved: Jun 28 2026 | 11:20:21 */
/* =========================
   DISPLAY
========================= */
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.hidden {
  display: none;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.grid {
  display: grid;
}
.inline-grid {
  display: inline-grid;
}
/* =========================
   FLEX DIRECTION
========================= */
.flex-row {
  flex-direction: row;
}
.flex-row-reverse {
  flex-direction: row-reverse;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
/* =========================
   FLEX WRAP
========================= */
.flex-wrap {
  flex-wrap: wrap;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
/* =========================
   FLEX BEHAVIOR
========================= */
.flex-1 {
  flex: 1 1 0%;
}
.flex-auto {
  flex: 1 1 auto;
}
.flex-initial {
  flex: 0 1 auto;
}
.flex-none {
  flex: none;
}
.grow {
  flex-grow: 1;
}
.grow-0 {
  flex-grow: 0;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.basis-0 {
  flex-basis: 0;
}
.basis-auto {
  flex-basis: auto;
}
.basis-full {
  flex-basis: 100%;
}
/* =========================
   JUSTIFY CONTENT
========================= */
.justify-start {
  justify-content: flex-start;
}
.justify-center {
  justify-content: center;
}
.justify-end {
  justify-content: flex-end;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.justify-evenly {
  justify-content: space-evenly;
}
/* =========================
   ALIGN ITEMS
========================= */
.items-start {
  align-items: flex-start;
}
.items-center {
  align-items: center;
}
.items-end {
  align-items: flex-end;
}
.items-stretch {
  align-items: stretch;
}
.items-baseline {
  align-items: baseline;
}
/* =========================
   ALIGN CONTENT
========================= */
.content-start {
  align-content: flex-start;
}
.content-center {
  align-content: center;
}
.content-end {
  align-content: flex-end;
}
.content-between {
  align-content: space-between;
}
/* =========================
   ALIGN SELF
========================= */
.self-start {
  align-self: flex-start;
}
.self-center {
  align-self: center;
}
.self-end {
  align-self: flex-end;
}
.self-stretch {
  align-self: stretch;
}
/* =========================
   GAP
========================= */
.gap-4xs {
  gap: var(--space-4xs);
}
.gap-3xs {
  gap: var(--space-3xs);
}
.gap-2xs {
  gap: var(--space-2xs);
}
.gap-xs {
  gap: var(--space-xs);
}
.gap-sm {
  gap: var(--space-sm);
}
.gap-md {
  gap: var(--space-md);
}
.gap-lg {
  gap: var(--space-lg);
}
.gap-xl {
  gap: var(--space-xl);
}
.gap-2xl {
  gap: var(--space-2xl);
}
.gap-3xl {
  gap: var(--space-3xl);
}
.gap-4xl {
  gap: var(--space-4xl);
}
/* row gap */
.gap-y-4xs {
  row-gap: var(--space-4xs);
}
.gap-y-3xs {
  row-gap: var(--space-3xs);
}
.gap-y-2xs {
  row-gap: var(--space-2xs);
}
.gap-y-xs {
  row-gap: var(--space-xs);
}
.gap-y-sm {
  row-gap: var(--space-sm);
}
.gap-y-md {
  row-gap: var(--space-md);
}
.gap-y-lg {
  row-gap: var(--space-lg);
}
.gap-y-xl {
  row-gap: var(--space-xl);
}
.gap-y-2xl {
  row-gap: var(--space-2xl);
}
.gap-y-3xl {
  row-gap: var(--space-3xl);
}
.gap-y-4xl {
  row-gap: var(--space-4xl);
}
/* column gap */
.gap-x-4xs {
  column-gap: var(--space-4xs);
}
.gap-x-3xs {
  column-gap: var(--space-3xs);
}
.gap-x-2xs {
  column-gap: var(--space-2xs);
}
.gap-x-xs {
  column-gap: var(--space-xs);
}
.gap-x-sm {
  column-gap: var(--space-sm);
}
.gap-x-md {
  column-gap: var(--space-md);
}
.gap-x-lg {
  column-gap: var(--space-lg);
}
.gap-x-xl {
  column-gap: var(--space-xl);
}
.gap-x-2xl {
  column-gap: var(--space-2xl);
}
.gap-x-3xl {
  column-gap: var(--space-3xl);
}
.gap-x-4xl {
  column-gap: var(--space-4xl);
}
/* semantic gap */
.gap-content {
  gap: var(--content-gap);
}
.gap-content-sm {
  gap: var(--content-gap-sm);
}
.gap-content-md {
  gap: var(--content-gap-md);
}
.gap-content-lg {
  gap: var(--content-gap-lg);
}
/* =========================
   MARGIN
========================= */
.m-0 {
  margin: 0;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.mt-0 {
  margin-top: 0;
}
.mt-xs {
  margin-top: var(--space-xs);
}
.mt-sm {
  margin-top: var(--space-sm);
}
.mt-md {
  margin-top: var(--space-md);
}
.mt-lg {
  margin-top: var(--space-lg);
}
.mt-xl {
  margin-top: var(--space-xl);
}
.mb-0 {
  margin-bottom: 0;
}
.mb-xs {
  margin-bottom: var(--space-xs);
}
.mb-sm {
  margin-bottom: var(--space-sm);
}
.mb-md {
  margin-bottom: var(--space-md);
}
.mb-lg {
  margin-bottom: var(--space-lg);
}
.mb-xl {
  margin-bottom: var(--space-xl);
}
.mx-xs {
  margin-left: var(--space-xs);
  margin-right: var(--space-xs);
}
.mx-sm {
  margin-left: var(--space-sm);
  margin-right: var(--space-sm);
}
.mx-md {
  margin-left: var(--space-md);
  margin-right: var(--space-md);
}
.mx-lg {
  margin-left: var(--space-lg);
  margin-right: var(--space-lg);
}
.mx-xl {
  margin-left: var(--space-xl);
  margin-right: var(--space-xl);
}
.my-xs {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-xs);
}
.my-sm {
  margin-top: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.my-md {
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}
.my-lg {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.my-xl {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xl);
}
/* =========================
   PADDING
========================= */
.p-0 {
  padding: 0;
}
.p-xs {
  padding: var(--space-xs);
}
.p-sm {
  padding: var(--space-sm);
}
.p-md {
  padding: var(--space-md);
}
.p-lg {
  padding: var(--space-lg);
}
.p-xl {
  padding: var(--space-xl);
}
.px-xs {
  padding-left: var(--space-xs);
  padding-right: var(--space-xs);
}
.px-sm {
  padding-left: var(--space-sm);
  padding-right: var(--space-sm);
}
.px-md {
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}
.px-lg {
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}
.px-xl {
  padding-left: var(--space-xl);
  padding-right: var(--space-xl);
}
.py-xs {
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
}
.py-sm {
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
}
.py-md {
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}
.py-lg {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}
.py-xl {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}
/* =========================
   WIDTH
========================= */
.w-auto {
  width: auto;
}
.w-fit {
  width: fit-content;
}
.w-full {
  width: 100%;
}
.w-screen {
  width: 100vw;
}
.w-xs {
  width: var(--width-xs);
}
.w-sm {
  width: var(--width-sm);
}
.w-md {
  width: var(--width-md);
}
.w-lg {
  width: var(--width-lg);
}
.w-xl {
  width: var(--width-xl);
}
.w-2xl {
  width: var(--width-2xl);
}
/* =========================
   MIN WIDTH
========================= */
.min-w-0 {
  min-width: 0;
}
.min-w-full {
  min-width: 100%;
}
/* =========================
   MAX WIDTH
========================= */
.max-w-full {
  max-width: 100%;
}
.max-w-xs {
  max-width: var(--width-xs);
}
.max-w-sm {
  max-width: var(--width-sm);
}
.max-w-md {
  max-width: var(--width-md);
}
.max-w-lg {
  max-width: var(--width-lg);
}
.max-w-xl {
  max-width: var(--width-xl);
}
.max-w-2xl {
  max-width: var(--width-2xl);
}
/* =========================
   HEIGHT
========================= */
.h-auto {
  height: auto;
}
.h-full {
  height: 100%;
}
.h-screen {
  height: 100vh;
}
.min-h-screen {
  min-height: 100vh;
}
/* =========================
   ASPECT RATIO
========================= */
.ratio-1x1 {
  aspect-ratio: 1;
}
.ratio-3x2 {
  aspect-ratio: 1.5;
}
.ratio-4x3 {
  aspect-ratio: 1.3333333333;
}
.ratio-16x9 {
  aspect-ratio: 1.7777777778;
}
/* =========================
   BORDER RADIUS
========================= */
.radius-xs {
  border-radius: var(--radius-xs);
}
.radius-sm {
  border-radius: var(--radius-sm);
}
.radius-md {
  border-radius: var(--radius-md);
}
.radius-lg {
  border-radius: var(--radius-lg);
}
.radius-xl {
  border-radius: var(--radius-xl);
}
.radius-full {
  border-radius: var(--radius-full);
}
/* semantic radius */
.radius-element {
  border-radius: var(--radius-element);
}
.radius-card {
  border-radius: var(--radius-card);
}
.radius-section {
  border-radius: var(--radius-section);
}
/* =========================
   BORDER
========================= */
.border {
  border: 1px solid var(--color-border);
}
.border-0 {
  border: 0;
}
/* =========================
   POSITION
========================= */
.z-1 {
  z-index: 1;
}
.z-10 {
  z-index: 10;
}
.z-100 {
  z-index: 100;
}
/* =========================
   OVERFLOW
========================= */
.overflow-hidden {
  overflow: hidden;
}
.overflow-auto {
  overflow: auto;
}
.overflow-visible {
  overflow: visible;
}
/* =========================
   TEXT
========================= */
.text-xs {
  font-size: var(--text-xs);
}
.text-sm {
  font-size: var(--text-sm);
}
.text-md {
  font-size: var(--text-md);
}
.text-lg {
  font-size: var(--text-lg);
}
.text-xl {
  font-size: var(--text-xl);
}
.text-2xl {
  font-size: var(--text-2xl);
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.uppercase {
  text-transform: uppercase;
}
.font-400 {
  font-weight: 400;
}
.font-500 {
  font-weight: 500;
}
.font-600 {
  font-weight: 600;
}
.font-700 {
  font-weight: 700;
}
.font-800 {
  font-weight: 800;
}
.nowrap {
  white-space: nowrap;
}
.text-balance {
  text-wrap: balance;
}
.text-pretty {
  text-wrap: pretty;
}
/* =========================
   MEDIA
========================= */
.object-cover {
  object-fit: cover;
}
.object-contain {
  object-fit: contain;
}
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-fluid {
  max-width: 100%;
  height: auto;
}
/* =========================
   CARDS
========================= */
.card-sm {
  padding: var(--card-space-sm);
}
.card-md {
  padding: var(--card-space-md);
}
.card-lg {
  padding: var(--card-space-lg);
}