/**
 * Bricks Custom Utility CSS Framework
 * ====================================
 * 
 * A comprehensive utility-first CSS framework for the Bricks builder.
 * This file contains utility classes for colors, typography, spacing,
 * layout, visual effects, and responsive design.
 * 
 * Browser Compatibility:
 * - Chrome/Edge: 88+ (full support)
 * - Firefox: 85+ (full support)
 * - Safari: 14+ (full support)
 * - Opera: 74+ (full support)
 * 
 * Features:
 * - CSS Custom Properties (CSS Variables)
 * - Flexbox & CSS Grid
 * - Modern selectors and pseudo-classes
 * - Responsive breakpoints (991px, 767px, 478px)
 * - Backdrop filters
 * - Line clamping with -webkit-line-clamp
 * 
 * Note: This file requires CSS variables to be defined in a separate
 * variables file or :root declaration.
 * 
 * Last Updated: 2025-12-15
 */

/* ========================================
   COLOR UTILITIES
   ======================================== */

/* Background Colors */
::placeholder {
    color: var(--placeholder-color);
}

body.bricks-is-frontend :focus-visible {
    outline: none;
}
.bg-primary {
  background-color: var(--primary-color);
}

.bg-color {
  background-color: var(--bg-color);
}

.bg-secondary {
  background-color: var(--secondary-color);
}

.bg-black {
  background-color: var(--black-color);
}

.bg-white-color {
  background-color: var(--white-color);
}

.bg-Tertiary {
  background-color: var(--bg-tertiary);
}


/* Text Colors */
.primary-color {
  color: var(--primary-color);
}

.secondary-color {
  color: var(--secondary-color);
}

.dark-color {
  color: var(--dark-color);
}

.error-color {
  color: var(--error-color);
}

.success-color {
  color: var(--success-color);
}

.black-color {
  color: var(--black-color);
}

.white-color {
  color: var(--white-color);
}

.border-color {
  color: var(--border-color);
}

.bg-transparent {
  background-color: var(--transparent);
}

.text-primary {
  color: var(--primary-color);
}


/* ========================================
   TYPOGRAPHY
   ======================================== */

/* Font Sizes */
.text-2xs {
  font-size: var(--text-2xs);
}

.text-xs {
  font-size: var(--text-xs);
}

.text-s {
  font-size: var(--text-s);
}

.text-m {
  font-size: var(--text-m);
}

.text-l {
  font-size: var(--text-l);
}

.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);
}


/* Heading Styles */
H1 {
  font-size: var(--text-3xl);
  line-height: 1.3;
  font-weight: 700;
}

H2 {
  font-size: var(--text-xl);
  line-height: 1.35;
  font-weight: 700;
}

H3 {
  font-size: var(--text-l);
  line-height: 1.4;
  font-weight: 600;
}

H4 {
  font-size: var(--text-m);
  line-height: 1.4;
}

p {
  font-size: var(--text-m);
  line-height: 1.5;
}


/* Font Weights */
.font-light {
  font-weight: 300;
}

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semi-bold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.font-black {
  font-weight: 900;
}


/* Line Heights */
.leading-none {
  line-height: 1;
}

.leading-tight {
  line-height: 1.25;
}

.leading-snug {
  line-height: 1.35;
}

.leading-normal {
  line-height: 1.5;
}

.leading-relaxed {
  line-height: 1.6;
}


/* Letter Spacing */
.tracking-tight {
  letter-spacing: 0.02em;
}

.tracking-normal {
  letter-spacing: 0.04em;
}

.tracking-wide {
  letter-spacing: 0.06em;
}


/* Text Alignment */
.text-left {
  text-align: left;
}

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

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

.text-justify {
  text-align: justify;
}


/* Text Decoration & Transform */
.italic {
  font-style: italic;
}

.lowercase {
  text-transform: lowercase;
}

.uppercase {
  text-transform: uppercase;
}

.underline {
  text-decoration: underline;
}


/* Text Wrapping */
.break-normal {
  overflow-wrap: normal;
  word-break: normal;
}

.break-words {
  overflow-wrap: break-word;
}

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

.whitespace-nowrap {
  white-space: nowrap;
}

.whitespace-normal {
  white-space: normal;
}


/* Line Clamping */
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  min-height: 2lh;
}

.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  min-height: 3lh;
}


/* ========================================
   SPACING
   ======================================== */

/* Padding - All Sides */
.p-0 {
  padding: var(--spacing-0);
}

.p-0\.5 {
  padding: var(--spacing-0_5);
}

.p-1 {
  padding: var(--spacing-1);
}

.p-1\.5 {
  padding: var(--spacing-1_5);
}

.p-2 {
  padding: var(--spacing-2);
}

.p-2\.5 {
  padding: var(--spacing-2_5);
}

.p-3 {
  padding: var(--spacing-3);
}

.p-4 {
  padding: var(--spacing-4);
}

.p-5 {
  padding: var(--spacing-5);
}

.p-6 {
  padding: var(--spacing-6);
}

.p-7 {
  padding: var(--spacing-7);
}

.p-8 {
  padding: var(--spacing-8);
}

.p-9 {
  padding: var(--spacing-9);
}

.p-10 {
  padding: var(--spacing-10);
}

.p-11 {
  padding: var(--spacing-11);
}

.p-12 {
  padding: var(--spacing-12);
}

.p-14 {
  padding: var(--spacing-14);
}

.p-16 {
  padding: var(--spacing-16);
}

.p-18 {
  padding: var(--spacing-18);
}

.p-20 {
  padding: var(--spacing-20);
}

.p-24 {
  padding: var(--spacing-24);
}

.p-28 {
  padding: var(--spacing-28);
}

.p-32 {
  padding: var(--spacing-32);
}

.p-36 {
  padding: var(--spacing-36);
}

.p-40 {
  padding: var(--spacing-40);
}

.p-44 {
  padding: var(--spacing-44);
}

.p-48 {
  padding: var(--spacing-48);
}

.p-52 {
  padding: var(--spacing-52);
}

.p-56 {
  padding: var(--spacing-56);
}

.p-60 {
  padding: var(--spacing-60);
}


/* Padding - Horizontal */
.px-0 {
  padding-left: var(--spacing-0);
  padding-right: var(--spacing-0);
}

.px-0\.5 {
  padding-left: var(--spacing-0_5);
  padding-right: var(--spacing-0_5);
}

.px-1 {
  padding-left: var(--spacing-1);
  padding-right: var(--spacing-1);
}

.px-1\.5 {
  padding-left: var(--spacing-1_5);
  padding-right: var(--spacing-1_5);
}

.px-2 {
  padding-left: var(--spacing-2);
  padding-right: var(--spacing-2);
}

.px-2\.5 {
  padding-left: var(--spacing-2_5);
  padding-right: var(--spacing-2_5);
}

.px-3 {
  padding-left: var(--spacing-3);
  padding-right: var(--spacing-3);
}

.px-4 {
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
}

.px-5 {
  padding-left: var(--spacing-5);
  padding-right: var(--spacing-5);
}

.px-6 {
  padding-left: var(--spacing-6);
  padding-right: var(--spacing-6);
}

.px-7 {
  padding-left: var(--spacing-7);
  padding-right: var(--spacing-7);
}

.px-8 {
  padding-left: var(--spacing-8);
  padding-right: var(--spacing-8);
}

.px-9 {
  padding-left: var(--spacing-9);
  padding-right: var(--spacing-9);
}

.px-10 {
  padding-left: var(--spacing-10);
  padding-right: var(--spacing-10);
}

.px-11 {
  padding-left: var(--spacing-11);
  padding-right: var(--spacing-11);
}

.px-12 {
  padding-left: var(--spacing-12);
  padding-right: var(--spacing-12);
}

.px-14 {
  padding-left: var(--spacing-14);
  padding-right: var(--spacing-14);
}

.px-16 {
  padding-left: var(--spacing-16);
  padding-right: var(--spacing-16);
}

.px-18 {
  padding-left: var(--spacing-18);
  padding-right: var(--spacing-18);
}

.px-20 {
  padding-left: var(--spacing-20);
  padding-right: var(--spacing-20);
}

.px-24 {
  padding-left: var(--spacing-24);
  padding-right: var(--spacing-24);
}

.px-28 {
  padding-left: var(--spacing-28);
  padding-right: var(--spacing-28);
}

.px-32 {
  padding-left: var(--spacing-32);
  padding-right: var(--spacing-32);
}

.px-36 {
  padding-left: var(--spacing-36);
  padding-right: var(--spacing-36);
}

.px-40 {
  padding-left: var(--spacing-40);
  padding-right: var(--spacing-40);
}

.px-44 {
  padding-left: var(--spacing-44);
  padding-right: var(--spacing-44);
}

.px-48 {
  padding-left: var(--spacing-48);
  padding-right: var(--spacing-48);
}

.px-52 {
  padding-left: var(--spacing-52);
  padding-right: var(--spacing-52);
}

.px-56 {
  padding-left: var(--spacing-56);
  padding-right: var(--spacing-56);
}

.px-60 {
  padding-left: var(--spacing-60);
  padding-right: var(--spacing-60);
}


/* Padding - Vertical */
.py-0 {
  padding-top: var(--spacing-0);
  padding-bottom: var(--spacing-0);
}

.py-0\.5 {
  padding-top: var(--spacing-0_5);
  padding-bottom: var(--spacing-0_5);
}

.py-1 {
  padding-top: var(--spacing-1);
  padding-bottom: var(--spacing-1);
}

.py-1\.5 {
  padding-top: var(--spacing-1_5);
  padding-bottom: var(--spacing-1_5);
}

.py-2 {
  padding-top: var(--spacing-2);
  padding-bottom: var(--spacing-2);
}

.py-2\.5 {
  padding-top: var(--spacing-2_5);
  padding-bottom: var(--spacing-2_5);
}

.py-3 {
  padding-top: var(--spacing-3);
  padding-bottom: var(--spacing-3);
}

.py-4 {
  padding-top: var(--spacing-4);
  padding-bottom: var(--spacing-4);
}

.py-5 {
  padding-top: var(--spacing-5);
  padding-bottom: var(--spacing-5);
}

.py-6 {
  padding-top: var(--spacing-6);
  padding-bottom: var(--spacing-6);
}

.py-7 {
  padding-top: var(--spacing-7);
  padding-bottom: var(--spacing-7);
}

.py-8 {
  padding-top: var(--spacing-8);
  padding-bottom: var(--spacing-8);
}

.py-9 {
  padding-top: var(--spacing-9);
  padding-bottom: var(--spacing-9);
}

.py-10 {
  padding-top: var(--spacing-10);
  padding-bottom: var(--spacing-10);
}

.py-11 {
  padding-top: var(--spacing-11);
  padding-bottom: var(--spacing-11);
}

.py-12 {
  padding-top: var(--spacing-12);
  padding-bottom: var(--spacing-12);
}

.py-14 {
  padding-top: var(--spacing-14);
  padding-bottom: var(--spacing-14);
}

.py-16 {
  padding-top: var(--spacing-16);
  padding-bottom: var(--spacing-16);
}

.py-18 {
  padding-top: var(--spacing-18);
  padding-bottom: var(--spacing-18);
}

.py-20 {
  padding-top: var(--spacing-20);
  padding-bottom: var(--spacing-20);
}

.py-24 {
  padding-top: var(--spacing-24);
  padding-bottom: var(--spacing-24);
}

.py-28 {
  padding-top: var(--spacing-28);
  padding-bottom: var(--spacing-28);
}

.py-32 {
  padding-top: var(--spacing-32);
  padding-bottom: var(--spacing-32);
}

.py-36 {
  padding-top: var(--spacing-36);
  padding-bottom: var(--spacing-36);
}

.py-40 {
  padding-top: var(--spacing-40);
  padding-bottom: var(--spacing-40);
}

.py-44 {
  padding-top: var(--spacing-44);
  padding-bottom: var(--spacing-44);
}

.py-48 {
  padding-top: var(--spacing-48);
  padding-bottom: var(--spacing-48);
}

.py-52 {
  padding-top: var(--spacing-52);
  padding-bottom: var(--spacing-52);
}

.py-56 {
  padding-top: var(--spacing-56);
  padding-bottom: var(--spacing-56);
}

.py-60 {
  padding-top: var(--spacing-60);
  padding-bottom: var(--spacing-60);
}


/* Padding - Top */
.pt-0 {
  padding-top: var(--spacing-0);
}

.pt-0\.5 {
  padding-top: var(--spacing-0_5);
}

.pt-1 {
  padding-top: var(--spacing-1);
}

.pt-1\.5 {
  padding-top: var(--spacing-1_5);
}

.pt-2 {
  padding-top: var(--spacing-2);
}

.pt-2\.5 {
  padding-top: var(--spacing-2_5);
}

.pt-3 {
  padding-top: var(--spacing-3);
}

.pt-4 {
  padding-top: var(--spacing-4);
}

.pt-5 {
  padding-top: var(--spacing-5);
}

.pt-6 {
  padding-top: var(--spacing-6);
}

.pt-7 {
  padding-top: var(--spacing-7);
}

.pt-8 {
  padding-top: var(--spacing-8);
}

.pt-9 {
  padding-top: var(--spacing-9);
}

.pt-10 {
  padding-top: var(--spacing-10);
}

.pt-11 {
  padding-top: var(--spacing-11);
}

.pt-12 {
  padding-top: var(--spacing-12);
}

.pt-14 {
  padding-top: var(--spacing-14);
}

.pt-16 {
  padding-top: var(--spacing-16);
}

.pt-18 {
  padding-top: var(--spacing-18);
}

.pt-20 {
  padding-top: var(--spacing-20);
}

.pt-24 {
  padding-top: var(--spacing-24);
}

.pt-28 {
  padding-top: var(--spacing-28);
}

.pt-32 {
  padding-top: var(--spacing-32);
}

.pt-36 {
  padding-top: var(--spacing-36);
}

.pt-40 {
  padding-top: var(--spacing-40);
}

.pt-44 {
  padding-top: var(--spacing-44);
}

.pt-48 {
  padding-top: var(--spacing-48);
}

.pt-52 {
  padding-top: var(--spacing-52);
}

.pt-56 {
  padding-top: var(--spacing-56);
}

.pt-60 {
  padding-top: var(--spacing-60);
}


/* Padding - Bottom */
.pb-0 {
  padding-bottom: var(--spacing-0);
}

.pb-0\.5 {
  padding-bottom: var(--spacing-0_5);
}

.pb-1 {
  padding-bottom: var(--spacing-1);
}

.pb-1\.5 {
  padding-bottom: var(--spacing-1_5);
}

.pb-2 {
  padding-bottom: var(--spacing-2);
}

.pb-2\.5 {
  padding-bottom: var(--spacing-2_5);
}

.pb-3 {
  padding-bottom: var(--spacing-3);
}

.pb-4 {
  padding-bottom: var(--spacing-4);
}

.pb-5 {
  padding-bottom: var(--spacing-5);
}

.pb-6 {
  padding-bottom: var(--spacing-6);
}

.pb-7 {
  padding-bottom: var(--spacing-7);
}

.pb-8 {
  padding-bottom: var(--spacing-8);
}

.pb-9 {
  padding-bottom: var(--spacing-9);
}

.pb-10 {
  padding-bottom: var(--spacing-10);
}

.pb-11 {
  padding-bottom: var(--spacing-11);
}

.pb-12 {
  padding-bottom: var(--spacing-12);
}

.pb-14 {
  padding-bottom: var(--spacing-14);
}

.pb-16 {
  padding-bottom: var(--spacing-16);
}

.pb-18 {
  padding-bottom: var(--spacing-18);
}

.pb-20 {
  padding-bottom: var(--spacing-20);
}

.pb-24 {
  padding-bottom: var(--spacing-24);
}

.pb-28 {
  padding-bottom: var(--spacing-28);
}

.pb-32 {
  padding-bottom: var(--spacing-32);
}

.pb-36 {
  padding-bottom: var(--spacing-36);
}

.pb-40 {
  padding-bottom: var(--spacing-40);
}

.pb-44 {
  padding-bottom: var(--spacing-44);
}

.pb-48 {
  padding-bottom: var(--spacing-48);
}

.pb-52 {
  padding-bottom: var(--spacing-52);
}

.pb-56 {
  padding-bottom: var(--spacing-56);
}

.pb-60 {
  padding-bottom: var(--spacing-60);
}


/* Padding - Left */
.pl-0 {
  padding-left: var(--spacing-0);
}

.pl-0\.5 {
  padding-left: var(--spacing-0_5);
}

.pl-1 {
  padding-left: var(--spacing-1);
}

.pl-1\.5 {
  padding-left: var(--spacing-1_5);
}

.pl-2 {
  padding-left: var(--spacing-2);
}

.pl-2\.5 {
  padding-left: var(--spacing-2_5);
}

.pl-3 {
  padding-left: var(--spacing-3);
}

.pl-4 {
  padding-left: var(--spacing-4);
}

.pl-5 {
  padding-left: var(--spacing-5);
}

.pl-6 {
  padding-left: var(--spacing-6);
}

.pl-7 {
  padding-left: var(--spacing-7);
}

.pl-8 {
  padding-left: var(--spacing-8);
}

.pl-9 {
  padding-left: var(--spacing-9);
}

.pl-10 {
  padding-left: var(--spacing-10);
}

.pl-11 {
  padding-left: var(--spacing-11);
}

.pl-12 {
  padding-left: var(--spacing-12);
}

.pl-14 {
  padding-left: var(--spacing-14);
}

.pl-16 {
  padding-left: var(--spacing-16);
}

.pl-18 {
  padding-left: var(--spacing-18);
}

.pl-20 {
  padding-left: var(--spacing-20);
}

.pl-24 {
  padding-left: var(--spacing-24);
}

.pl-28 {
  padding-left: var(--spacing-28);
}

.pl-32 {
  padding-left: var(--spacing-32);
}

.pl-36 {
  padding-left: var(--spacing-36);
}

.pl-40 {
  padding-left: var(--spacing-40);
}

.pl-44 {
  padding-left: var(--spacing-44);
}

.pl-48 {
  padding-left: var(--spacing-48);
}

.pl-52 {
  padding-left: var(--spacing-52);
}

.pl-56 {
  padding-left: var(--spacing-56);
}

.pl-60 {
  padding-left: var(--spacing-60);
}


/* Padding - Right */
.pr-0 {
  padding-right: var(--spacing-0);
}

.pr-0\.5 {
  padding-right: var(--spacing-0_5);
}

.pr-1 {
  padding-right: var(--spacing-1);
}

.pr-1\.5 {
  padding-right: var(--spacing-1_5);
}

.pr-2 {
  padding-right: var(--spacing-2);
}

.pr-2\.5 {
  padding-right: var(--spacing-2_5);
}

.pr-3 {
  padding-right: var(--spacing-3);
}

.pr-4 {
  padding-right: var(--spacing-4);
}

.pr-5 {
  padding-right: var(--spacing-5);
}

.pr-6 {
  padding-right: var(--spacing-6);
}

.pr-7 {
  padding-right: var(--spacing-7);
}

.pr-8 {
  padding-right: var(--spacing-8);
}

.pr-9 {
  padding-right: var(--spacing-9);
}

.pr-10 {
  padding-right: var(--spacing-10);
}

.pr-11 {
  padding-right: var(--spacing-11);
}

.pr-12 {
  padding-right: var(--spacing-12);
}

.pr-14 {
  padding-right: var(--spacing-14);
}

.pr-16 {
  padding-right: var(--spacing-16);
}

.pr-18 {
  padding-right: var(--spacing-18);
}

.pr-20 {
  padding-right: var(--spacing-20);
}

.pr-24 {
  padding-right: var(--spacing-24);
}

.pr-28 {
  padding-right: var(--spacing-28);
}

.pr-32 {
  padding-right: var(--spacing-32);
}

.pr-36 {
  padding-right: var(--spacing-36);
}

.pr-40 {
  padding-right: var(--spacing-40);
}

.pr-44 {
  padding-right: var(--spacing-44);
}

.pr-48 {
  padding-right: var(--spacing-48);
}

.pr-52 {
  padding-right: var(--spacing-52);
}

.pr-56 {
  padding-right: var(--spacing-56);
}

.pr-60 {
  padding-right: var(--spacing-60);
}


/* Margin - All Sides */
.m-0 {
  margin: var(--spacing-0);
}

.m-0\.5 {
  margin: var(--spacing-0_5);
}

.m-1 {
  margin: var(--spacing-1);
}

.m-1\.5 {
  margin: var(--spacing-1_5);
}

.m-2 {
  margin: var(--spacing-2);
}

.m-2\.5 {
  margin: var(--spacing-2_5);
}

.m-3 {
  margin: var(--spacing-3);
}

.m-4 {
  margin: var(--spacing-4);
}

.m-5 {
  margin: var(--spacing-5);
}

.m-6 {
  margin: var(--spacing-6);
}

.m-7 {
  margin: var(--spacing-7);
}

.m-8 {
  margin: var(--spacing-8);
}

.m-9 {
  margin: var(--spacing-9);
}

.m-10 {
  margin: var(--spacing-10);
}

.m-11 {
  margin: var(--spacing-11);
}

.m-12 {
  margin: var(--spacing-12);
}

.m-14 {
  margin: var(--spacing-14);
}

.m-16 {
  margin: var(--spacing-16);
}

.m-18 {
  margin: var(--spacing-18);
}

.m-20 {
  margin: var(--spacing-20);
}

.m-24 {
  margin: var(--spacing-24);
}

.m-28 {
  margin: var(--spacing-28);
}

.m-32 {
  margin: var(--spacing-32);
}

.m-36 {
  margin: var(--spacing-36);
}

.m-40 {
  margin: var(--spacing-40);
}

.m-44 {
  margin: var(--spacing-44);
}

.m-48 {
  margin: var(--spacing-48);
}

.m-52 {
  margin: var(--spacing-52);
}

.m-56 {
  margin: var(--spacing-56);
}

.m-60 {
  margin: var(--spacing-60);
}

.m-auto {
  margin: auto;
}


/* Margin - Horizontal */
.mx-0 {
  margin-left: var(--spacing-0);
  margin-right: var(--spacing-0);
}

.mx-0\.5 {
  margin-left: var(--spacing-0_5);
  margin-right: var(--spacing-0_5);
}

.mx-1 {
  margin-left: var(--spacing-1);
  margin-right: var(--spacing-1);
}

.mx-1\.5 {
  margin-left: var(--spacing-1_5);
  margin-right: var(--spacing-1_5);
}

.mx-2 {
  margin-left: var(--spacing-2);
  margin-right: var(--spacing-2);
}

.mx-2\.5 {
  margin-left: var(--spacing-2_5);
  margin-right: var(--spacing-2_5);
}

.mx-3 {
  margin-left: var(--spacing-3);
  margin-right: var(--spacing-3);
}

.mx-4 {
  margin-left: var(--spacing-4);
  margin-right: var(--spacing-4);
}

.mx-5 {
  margin-left: var(--spacing-5);
  margin-right: var(--spacing-5);
}

.mx-6 {
  margin-left: var(--spacing-6);
  margin-right: var(--spacing-6);
}

.mx-7 {
  margin-left: var(--spacing-7);
  margin-right: var(--spacing-7);
}

.mx-8 {
  margin-left: var(--spacing-8);
  margin-right: var(--spacing-8);
}

.mx-9 {
  margin-left: var(--spacing-9);
  margin-right: var(--spacing-9);
}

.mx-10 {
  margin-left: var(--spacing-10);
  margin-right: var(--spacing-10);
}

.mx-11 {
  margin-left: var(--spacing-11);
  margin-right: var(--spacing-11);
}

.mx-12 {
  margin-left: var(--spacing-12);
  margin-right: var(--spacing-12);
}

.mx-14 {
  margin-left: var(--spacing-14);
  margin-right: var(--spacing-14);
}

.mx-16 {
  margin-left: var(--spacing-16);
  margin-right: var(--spacing-16);
}

.mx-18 {
  margin-left: var(--spacing-18);
  margin-right: var(--spacing-18);
}

.mx-20 {
  margin-left: var(--spacing-20);
  margin-right: var(--spacing-20);
}

.mx-24 {
  margin-left: var(--spacing-24);
  margin-right: var(--spacing-24);
}

.mx-28 {
  margin-left: var(--spacing-28);
  margin-right: var(--spacing-28);
}

.mx-32 {
  margin-left: var(--spacing-32);
  margin-right: var(--spacing-32);
}

.mx-36 {
  margin-left: var(--spacing-36);
  margin-right: var(--spacing-36);
}

.mx-40 {
  margin-left: var(--spacing-40);
  margin-right: var(--spacing-40);
}

.mx-44 {
  margin-left: var(--spacing-44);
  margin-right: var(--spacing-44);
}

.mx-48 {
  margin-left: var(--spacing-48);
  margin-right: var(--spacing-48);
}

.mx-52 {
  margin-left: var(--spacing-52);
  margin-right: var(--spacing-52);
}

.mx-56 {
  margin-left: var(--spacing-56);
  margin-right: var(--spacing-56);
}

.mx-60 {
  margin-left: var(--spacing-60);
  margin-right: var(--spacing-60);
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}


/* Margin - Vertical */
.my-0 {
  margin-top: var(--spacing-0);
  margin-bottom: var(--spacing-0);
}

.my-0\.5 {
  margin-top: var(--spacing-0_5);
  margin-bottom: var(--spacing-0_5);
}

.my-1 {
  margin-top: var(--spacing-1);
  margin-bottom: var(--spacing-1);
}

.my-1\.5 {
  margin-top: var(--spacing-1_5);
  margin-bottom: var(--spacing-1_5);
}

.my-2 {
  margin-top: var(--spacing-2);
  margin-bottom: var(--spacing-2);
}

.my-2\.5 {
  margin-top: var(--spacing-2_5);
  margin-bottom: var(--spacing-2_5);
}

.my-3 {
  margin-top: var(--spacing-3);
  margin-bottom: var(--spacing-3);
}

.my-4 {
  margin-top: var(--spacing-4);
  margin-bottom: var(--spacing-4);
}

.my-5 {
  margin-top: var(--spacing-5);
  margin-bottom: var(--spacing-5);
}

.my-6 {
  margin-top: var(--spacing-6);
  margin-bottom: var(--spacing-6);
}

.my-7 {
  margin-top: var(--spacing-7);
  margin-bottom: var(--spacing-7);
}

.my-8 {
  margin-top: var(--spacing-8);
  margin-bottom: var(--spacing-8);
}

.my-9 {
  margin-top: var(--spacing-9);
  margin-bottom: var(--spacing-9);
}

.my-10 {
  margin-top: var(--spacing-10);
  margin-bottom: var(--spacing-10);
}

.my-11 {
  margin-top: var(--spacing-11);
  margin-bottom: var(--spacing-11);
}

.my-12 {
  margin-top: var(--spacing-12);
  margin-bottom: var(--spacing-12);
}

.my-14 {
  margin-top: var(--spacing-14);
  margin-bottom: var(--spacing-14);
}

.my-16 {
  margin-top: var(--spacing-16);
  margin-bottom: var(--spacing-16);
}

.my-18 {
  margin-top: var(--spacing-18);
  margin-bottom: var(--spacing-18);
}

.my-20 {
  margin-top: var(--spacing-20);
  margin-bottom: var(--spacing-20);
}

.my-24 {
  margin-top: var(--spacing-24);
  margin-bottom: var(--spacing-24);
}

.my-28 {
  margin-top: var(--spacing-28);
  margin-bottom: var(--spacing-28);
}

.my-32 {
  margin-top: var(--spacing-32);
  margin-bottom: var(--spacing-32);
}

.my-36 {
  margin-top: var(--spacing-36);
  margin-bottom: var(--spacing-36);
}

.my-40 {
  margin-top: var(--spacing-40);
  margin-bottom: var(--spacing-40);
}

.my-44 {
  margin-top: var(--spacing-44);
  margin-bottom: var(--spacing-44);
}

.my-48 {
  margin-top: var(--spacing-48);
  margin-bottom: var(--spacing-48);
}

.my-52 {
  margin-top: var(--spacing-52);
  margin-bottom: var(--spacing-52);
}

.my-56 {
  margin-top: var(--spacing-56);
  margin-bottom: var(--spacing-56);
}

.my-60 {
  margin-top: var(--spacing-60);
  margin-bottom: var(--spacing-60);
}

.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}


/* Margin - Top */
.mt-0 {
  margin-top: var(--spacing-0);
}

.mt-0\.5 {
  margin-top: var(--spacing-0_5);
}

.mt-1 {
  margin-top: var(--spacing-1);
}

.mt-1\.5 {
  margin-top: var(--spacing-1_5);
}

.mt-2 {
  margin-top: var(--spacing-2);
}

.mt-2\.5 {
  margin-top: var(--spacing-2_5);
}

.mt-3 {
  margin-top: var(--spacing-3);
}

.mt-4 {
  margin-top: var(--spacing-4);
}

.mt-5 {
  margin-top: var(--spacing-5);
}

.mt-6 {
  margin-top: var(--spacing-6);
}

.mt-7 {
  margin-top: var(--spacing-7);
}

.mt-8 {
  margin-top: var(--spacing-8);
}

.mt-9 {
  margin-top: var(--spacing-9);
}

.mt-10 {
  margin-top: var(--spacing-10);
}

.mt-11 {
  margin-top: var(--spacing-11);
}

.mt-12 {
  margin-top: var(--spacing-12);
}

.mt-14 {
  margin-top: var(--spacing-14);
}

.mt-16 {
  margin-top: var(--spacing-16);
}

.mt-18 {
  margin-top: var(--spacing-18);
}

.mt-20 {
  margin-top: var(--spacing-20);
}

.mt-24 {
  margin-top: var(--spacing-24);
}

.mt-28 {
  margin-top: var(--spacing-28);
}

.mt-32 {
  margin-top: var(--spacing-32);
}

.mt-36 {
  margin-top: var(--spacing-36);
}

.mt-40 {
  margin-top: var(--spacing-40);
}

.mt-44 {
  margin-top: var(--spacing-44);
}

.mt-48 {
  margin-top: var(--spacing-48);
}

.mt-52 {
  margin-top: var(--spacing-52);
}

.mt-56 {
  margin-top: var(--spacing-56);
}

.mt-60 {
  margin-top: var(--spacing-60);
}

.mt-auto {
  margin-top: auto;
}


/* Margin - Bottom */
.mb-0 {
  margin-bottom: var(--spacing-0);
}

.mb-0\.5 {
  margin-bottom: var(--spacing-0_5);
}

.mb-1 {
  margin-bottom: var(--spacing-1);
}

.mb-1\.5 {
  margin-bottom: var(--spacing-1_5);
}

.mb-2 {
  margin-bottom: var(--spacing-2);
}

.mb-2\.5 {
  margin-bottom: var(--spacing-2_5);
}

.mb-3 {
  margin-bottom: var(--spacing-3);
}

.mb-4 {
  margin-bottom: var(--spacing-4);
}

.mb-5 {
  margin-bottom: var(--spacing-5);
}

.mb-6 {
  margin-bottom: var(--spacing-6);
}

.mb-7 {
  margin-bottom: var(--spacing-7);
}

.mb-8 {
  margin-bottom: var(--spacing-8);
}

.mb-9 {
  margin-bottom: var(--spacing-9);
}

.mb-10 {
  margin-bottom: var(--spacing-10);
}

.mb-11 {
  margin-bottom: var(--spacing-11);
}

.mb-12 {
  margin-bottom: var(--spacing-12);
}

.mb-14 {
  margin-bottom: var(--spacing-14);
}

.mb-16 {
  margin-bottom: var(--spacing-16);
}

.mb-18 {
  margin-bottom: var(--spacing-18);
}

.mb-20 {
  margin-bottom: var(--spacing-20);
}

.mb-24 {
  margin-bottom: var(--spacing-24);
}

.mb-28 {
  margin-bottom: var(--spacing-28);
}

.mb-32 {
  margin-bottom: var(--spacing-32);
}

.mb-36 {
  margin-bottom: var(--spacing-36);
}

.mb-40 {
  margin-bottom: var(--spacing-40);
}

.mb-44 {
  margin-bottom: var(--spacing-44);
}

.mb-48 {
  margin-bottom: var(--spacing-48);
}

.mb-52 {
  margin-bottom: var(--spacing-52);
}

.mb-56 {
  margin-bottom: var(--spacing-56);
}

.mb-60 {
  margin-bottom: var(--spacing-60);
}

.mb-auto {
  margin-bottom: auto;
}


/* Margin - Left */
.ml-0 {
  margin-left: var(--spacing-0);
}

.ml-0\.5 {
  margin-left: var(--spacing-0_5);
}

.ml-1 {
  margin-left: var(--spacing-1);
}

.ml-1\.5 {
  margin-left: var(--spacing-1_5);
}

.ml-2 {
  margin-left: var(--spacing-2);
}

.ml-2\.5 {
  margin-left: var(--spacing-2_5);
}

.ml-3 {
  margin-left: var(--spacing-3);
}

.ml-4 {
  margin-left: var(--spacing-4);
}

.ml-5 {
  margin-left: var(--spacing-5);
}

.ml-6 {
  margin-left: var(--spacing-6);
}

.ml-7 {
  margin-left: var(--spacing-7);
}

.ml-8 {
  margin-left: var(--spacing-8);
}

.ml-9 {
  margin-left: var(--spacing-9);
}

.ml-10 {
  margin-left: var(--spacing-10);
}

.ml-11 {
  margin-left: var(--spacing-11);
}

.ml-12 {
  margin-left: var(--spacing-12);
}

.ml-14 {
  margin-left: var(--spacing-14);
}

.ml-16 {
  margin-left: var(--spacing-16);
}

.ml-18 {
  margin-left: var(--spacing-18);
}

.ml-20 {
  margin-left: var(--spacing-20);
}

.ml-24 {
  margin-left: var(--spacing-24);
}

.ml-28 {
  margin-left: var(--spacing-28);
}

.ml-32 {
  margin-left: var(--spacing-32);
}

.ml-36 {
  margin-left: var(--spacing-36);
}

.ml-40 {
  margin-left: var(--spacing-40);
}

.ml-44 {
  margin-left: var(--spacing-44);
}

.ml-48 {
  margin-left: var(--spacing-48);
}

.ml-52 {
  margin-left: var(--spacing-52);
}

.ml-56 {
  margin-left: var(--spacing-56);
}

.ml-60 {
  margin-left: var(--spacing-60);
}

.ml-auto {
  margin-left: auto;
}


/* Margin - Right */
.mr-0 {
  margin-right: var(--spacing-0);
}

.mr-0\.5 {
  margin-right: var(--spacing-0_5);
}

.mr-1 {
  margin-right: var(--spacing-1);
}

.mr-1\.5 {
  margin-right: var(--spacing-1_5);
}

.mr-2 {
  margin-right: var(--spacing-2);
}

.mr-2\.5 {
  margin-right: var(--spacing-2_5);
}

.mr-3 {
  margin-right: var(--spacing-3);
}

.mr-4 {
  margin-right: var(--spacing-4);
}

.mr-5 {
  margin-right: var(--spacing-5);
}

.mr-6 {
  margin-right: var(--spacing-6);
}

.mr-7 {
  margin-right: var(--spacing-7);
}

.mr-8 {
  margin-right: var(--spacing-8);
}

.mr-9 {
  margin-right: var(--spacing-9);
}

.mr-10 {
  margin-right: var(--spacing-10);
}

.mr-11 {
  margin-right: var(--spacing-11);
}

.mr-12 {
  margin-right: var(--spacing-12);
}

.mr-14 {
  margin-right: var(--spacing-14);
}

.mr-16 {
  margin-right: var(--spacing-16);
}

.mr-18 {
  margin-right: var(--spacing-18);
}

.mr-20 {
  margin-right: var(--spacing-20);
}

.mr-24 {
  margin-right: var(--spacing-24);
}

.mr-28 {
  margin-right: var(--spacing-28);
}

.mr-32 {
  margin-right: var(--spacing-32);
}

.mr-36 {
  margin-right: var(--spacing-36);
}

.mr-40 {
  margin-right: var(--spacing-40);
}

.mr-44 {
  margin-right: var(--spacing-44);
}

.mr-48 {
  margin-right: var(--spacing-48);
}

.mr-52 {
  margin-right: var(--spacing-52);
}

.mr-56 {
  margin-right: var(--spacing-56);
}

.mr-60 {
  margin-right: var(--spacing-60);
}

.mr-auto {
  margin-right: auto;
}


/* Gap */
.gap-0 {
  gap: var(--spacing-0);
}

.gap-0\.5 {
  gap: var(--spacing-0_5);
}

.gap-1 {
  gap: var(--spacing-1);
}

.gap-1\.5 {
  gap: var(--spacing-1_5);
}

.gap-2 {
  gap: var(--spacing-2);
}

.gap-2\.5 {
  gap: var(--spacing-2_5);
}

.gap-3 {
  gap: var(--spacing-3);
}

.gap-4 {
  gap: var(--spacing-4);
}

.gap-5 {
  gap: var(--spacing-5);
}

.gap-6 {
  gap: var(--spacing-6);
}

.gap-7 {
  gap: var(--spacing-7);
}

.gap-8 {
  gap: var(--spacing-8);
}

.gap-9 {
  gap: var(--spacing-9);
}

.gap-10 {
  gap: var(--spacing-10);
}

.gap-11 {
  gap: var(--spacing-11);
}

.gap-12 {
  gap: var(--spacing-12);
}

.gap-14 {
  gap: var(--spacing-14);
}

.gap-16 {
  gap: var(--spacing-16);
}

.gap-18 {
  gap: var(--spacing-18);
}

.gap-20 {
  gap: var(--spacing-20);
}

.gap-24 {
  gap: var(--spacing-24);
}

.gap-28 {
  gap: var(--spacing-28);
}

.gap-32 {
  gap: var(--spacing-32);
}

.gap-36 {
  gap: var(--spacing-36);
}

.gap-40 {
  gap: var(--spacing-40);
}

.gap-44 {
  gap: var(--spacing-44);
}

.gap-48 {
  gap: var(--spacing-48);
}

.gap-52 {
  gap: var(--spacing-52);
}

.gap-56 {
  gap: var(--spacing-56);
}

.gap-60 {
  gap: var(--spacing-60);
}


/* Gap - Horizontal */
.gap-x-0 {
  column-gap: var(--spacing-0);
}

.gap-x-0\.5 {
  column-gap: var(--spacing-0_5);
}

.gap-x-1 {
  column-gap: var(--spacing-1);
}

.gap-x-1\.5 {
  column-gap: var(--spacing-1_5);
}

.gap-x-2 {
  column-gap: var(--spacing-2);
}

.gap-x-2\.5 {
  column-gap: var(--spacing-2_5);
}

.gap-x-3 {
  column-gap: var(--spacing-3);
}

.gap-x-4 {
  column-gap: var(--spacing-4);
}

.gap-x-5 {
  column-gap: var(--spacing-5);
}

.gap-x-6 {
  column-gap: var(--spacing-6);
}

.gap-x-7 {
  column-gap: var(--spacing-7);
}

.gap-x-8 {
  column-gap: var(--spacing-8);
}

.gap-x-9 {
  column-gap: var(--spacing-9);
}

.gap-x-10 {
  column-gap: var(--spacing-10);
}

.gap-x-11 {
  column-gap: var(--spacing-11);
}

.gap-x-12 {
  column-gap: var(--spacing-12);
}

.gap-x-14 {
  column-gap: var(--spacing-14);
}

.gap-x-16 {
  column-gap: var(--spacing-16);
}

.gap-x-18 {
  column-gap: var(--spacing-18);
}

.gap-x-20 {
  column-gap: var(--spacing-20);
}

.gap-x-24 {
  column-gap: var(--spacing-24);
}

.gap-x-28 {
  column-gap: var(--spacing-28);
}

.gap-x-32 {
  column-gap: var(--spacing-32);
}

.gap-x-36 {
  column-gap: var(--spacing-36);
}

.gap-x-40 {
  column-gap: var(--spacing-40);
}

.gap-x-44 {
  column-gap: var(--spacing-44);
}

.gap-x-48 {
  column-gap: var(--spacing-48);
}

.gap-x-52 {
  column-gap: var(--spacing-52);
}

.gap-x-56 {
  column-gap: var(--spacing-56);
}

.gap-x-60 {
  column-gap: var(--spacing-60);
}


/* Gap - Vertical */
.gap-y-0 {
  row-gap: var(--spacing-0);
}

.gap-y-0\.5 {
  row-gap: var(--spacing-0_5);
}

.gap-y-1 {
  row-gap: var(--spacing-1);
}

.gap-y-1\.5 {
  row-gap: var(--spacing-1_5);
}

.gap-y-2 {
  row-gap: var(--spacing-2);
}

.gap-y-2\.5 {
  row-gap: var(--spacing-2_5);
}

.gap-y-3 {
  row-gap: var(--spacing-3);
}

.gap-y-4 {
  row-gap: var(--spacing-4);
}

.gap-y-5 {
  row-gap: var(--spacing-5);
}

.gap-y-6 {
  row-gap: var(--spacing-6);
}

.gap-y-7 {
  row-gap: var(--spacing-7);
}

.gap-y-8 {
  row-gap: var(--spacing-8);
}

.gap-y-9 {
  row-gap: var(--spacing-9);
}

.gap-y-10 {
  row-gap: var(--spacing-10);
}

.gap-y-11 {
  row-gap: var(--spacing-11);
}

.gap-y-12 {
  row-gap: var(--spacing-12);
}

.gap-y-14 {
  row-gap: var(--spacing-14);
}

.gap-y-16 {
  row-gap: var(--spacing-16);
}

.gap-y-18 {
  row-gap: var(--spacing-18);
}

.gap-y-20 {
  row-gap: var(--spacing-20);
}

.gap-y-24 {
  row-gap: var(--spacing-24);
}

.gap-y-28 {
  row-gap: var(--spacing-28);
}

.gap-y-32 {
  row-gap: var(--spacing-32);
}

.gap-y-36 {
  row-gap: var(--spacing-36);
}

.gap-y-40 {
  row-gap: var(--spacing-40);
}

.gap-y-44 {
  row-gap: var(--spacing-44);
}

.gap-y-48 {
  row-gap: var(--spacing-48);
}

.gap-y-52 {
  row-gap: var(--spacing-52);
}

.gap-y-56 {
  row-gap: var(--spacing-56);
}

.gap-y-60 {
  row-gap: var(--spacing-60);
}


/* ========================================
   LAYOUT
   ======================================== */

/* Display */
.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.flex-none {
  flex: none;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-auto {
  overflow: auto;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-scroll {
  overflow-y: scroll;
}


/* Flexbox Direction & Wrap */
.flex-row {
  display: flex;
  flex-direction: row;
}

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

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}


/* Grid Template Columns */
.grid-cols-1 {
  display: grid;
  grid-template-columns: var(--grid-cols-1);
}

.grid-cols-2 {
  display: grid;
  grid-template-columns: var(--grid-cols-2);
}

.grid-cols-3 {
  display: grid;
  grid-template-columns: var(--grid-cols-3);
}

.grid-cols-4 {
  display: grid;
  grid-template-columns: var(--grid-cols-4);
}

.grid-cols-5 {
  display: grid;
  grid-template-columns: var(--grid-cols-5);
}

.grid-cols-6 {
  display: grid;
  grid-template-columns: var(--grid-cols-6);
}

.grid-cols-7 {
  display: grid;
  grid-template-columns: var(--grid-cols-7);
}

.grid-cols-8 {
  display: grid;
  grid-template-columns: var(--grid-cols-8);
}

.grid-cols-9 {
  display: grid;
  grid-template-columns: var(--grid-cols-9);
}

.grid-cols-10 {
  display: grid;
  grid-template-columns: var(--grid-cols-10);
}

.grid-cols-11 {
  display: grid;
  grid-template-columns: var(--grid-cols-11);
}

.grid-cols-12 {
  display: grid;
  grid-template-columns: var(--grid-cols-12);
}

.grid-cols-13 {
  display: grid;
  grid-template-columns: var(--grid-cols-13);
}

.grid-cols-14 {
  display: grid;
  grid-template-columns: var(--grid-cols-14);
}

.grid-cols-none {
  grid-template-columns: none;
}


/* Grid Row Spans */
.row-auto {
  grid-row: auto;
}

.row-span-1 {
  grid-row: var(--span-1) / var(--span-1);
}

.row-span-2 {
  grid-row: var(--span-2) / var(--span-2);
}

.row-span-3 {
  grid-row: var(--span-3) / var(--span-3);
}

.row-span-4 {
  grid-row: var(--span-4) / var(--span-4);
}

.row-span-5 {
  grid-row: var(--span-5) / var(--span-5);
}

.row-span-6 {
  grid-row: var(--span-6) / var(--span-6);
}

.row-span-7 {
  grid-row: var(--span-7) / var(--span-7);
}

.row-span-full {
  grid-row: 1 / -1;
}


/* Grid Column Spans */
.col-auto {
  grid-column: auto;
}

.col-span-1 {
  grid-column: var(--span-1) / var(--span-1);
}

.col-span-2 {
  grid-column: var(--span-2) / var(--span-2);
}

.col-span-3 {
  grid-column: var(--span-3) / var(--span-3);
}

.col-span-4 {
  grid-column: var(--span-4) / var(--span-4);
}

.col-span-5 {
  grid-column: var(--span-5) / var(--span-5);
}

.col-span-6 {
  grid-column: var(--span-6) / var(--span-6);
}

.col-span-7 {
  grid-column: var(--span-7) / var(--span-7);
}

.col-span-full {
  grid-column: 1 / -1;
}


/* Grid Column Start/End */
.col-start-1 {
  grid-column-start: 1;
}

.col-start-2 {
  grid-column-start: 2;
}

.col-start-3 {
  grid-column-start: 3;
}


/* Grid Row Start/End */
.row-start-1 {
  grid-row-start: 1;
}

.row-start-2 {
  grid-row-start: 2;
}

.row-start-3 {
  grid-row-start: 3;
}


/* Justify Content */
.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-stretch {
  justify-content: stretch;
}


/* Align Content */
.content-start {
  align-content: flex-start;
}

.content-end {
  align-content: flex-end;
}

.content-center {
  align-content: center;
}

.content-between {
  align-content: space-between;
}

.content-stretch {
  align-content: stretch;
}


/* Justify Items */
.justify-items-start {
  justify-items: start;
}

.justify-items-end {
  justify-items: end;
}

.justify-items-center {
  justify-items: center;
}

.justify-items-stretch {
  justify-items: stretch;
}


/* Align Items */
.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-stretch {
  align-items: stretch;
}


/* Justify Self */
.justify-self-start {
  justify-self: start;
}

.justify-self-end {
  justify-self: end;
}

.justify-self-center {
  justify-self: center;
}

.justify-self-stretch {
  justify-self: stretch;
}


/* Align Self */
.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.self-stretch {
  align-self: stretch;
}


/* Float & Object Position */
.float-right {
  object-fit: cover;
}

.float-left {
  float: left;
}

.object-center {
  object-position: center;
}


/* Order */
.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-first {
  order: -999;
}

.order-last {
  order: 999;
}


/* ========================================
   VISUAL EFFECTS
   ======================================== */

/* Object Fit */
.object-cover {
  object-fit: cover;
}


/* Shadows */
.shadow-sm {
  box-shadow: var(--shadow-sm);
}

.shadow-s {
  box-shadow: var(--shadow-s);
}

.drop-shadow-sm {
  filter: var(--drop-shadow-sm);
}

.drop-shadow-s {
  filter: var(--drop-shadow-s);
}


/* Border Radius & Borders */
.rounded-s {
  border-radius: var(--spacing-2_5);
}

.rounded-m {
  border-radius: var(--spacing-5);
}

.rounded-l {
  border-radius: var(--spacing-8);
}

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

.rounded-full {
  border-radius: 999rem;
}

.border-0 {
  border-width: var(--spacing-0);
}

.border-1 {
  border-width: var(--spacing-0_5);
}

.border-2 {
  border-width: var(--spacing-0_5);
}

.border-3 {
  border-width: var(--spacing-1_5);
}

.border-solid {
  border-style: solid;
}

.border-dashed {
  border-style: dashed;
}

.border-dotted {
  border-style: dotted;
}

.border-none {
  border-style: none;
}


/* Backdrop Filters */
.backdrop-blur-2 {
  backdrop-filter: blur(2px);
}

.backdrop-blur-4 {
  backdrop-filter: blur(4px);
}

.backdrop-blur-8 {
  backdrop-filter: blur(8px);
}

.backdrop-blur-12 {
  backdrop-filter: blur(12px);
}


/* ========================================
   SIZING
   ======================================== */

/* Width */
.w-full {
  width: var(--1by1);
}

.w-auto {
  width: auto;
}

.w-screen {
  width: var(--100vw);
}

.w-min {
  width: min-content;
}

.w-max {
  width: max-content;
}

.w-fit {
  width: fit-content;
}

.w-1by2 {
  width: var(--1by2);
}

.w-1by3 {
  width: var(--1by3);
}

.w-2by3 {
  width: var(--2by3);
}

.w-1by4 {
  width: var(--1by4);
}

.w-3by4 {
  width: var(--3by4);
}

.w-1by5 {
  width: var(--1by5);
}

.w-2by5 {
  width: var(--2by5);
}

.w-3by5 {
  width: var(--3by5);
}

.w-4by5 {
  width: var(--4by5);
}

.w-1by6 {
  width: var(--1by6);
}

.w-5by6 {
  width: var(--5by6);
}

.w-1by10 {
  width: var(--1by10);
}

.w-1by20 {
  width: var(--1by20);
}


/* Max Width */
.max-w-full {
  max-width: var(--1by1);
}

.max-w-min {
  max-width: min-content;
}

.max-w-max {
  max-width: max-content;
}

.max-w-fit {
  max-width: fit-content;
}

.max-w-prose {
  max-width: 65ch;
}


/* Height */
.h-full {
  height: var(--1by1);
}

.h-auto {
  height: auto;
}

.h-screen {
  height: var(--100vh);
}

.h-min {
  height: min-content;
}

.h-max {
  height: max-content;
}

.h-fit {
  height: fit-content;
}


/* ========================================
   INTERACTIVITY
   ======================================== */

/* Cursor & Pointer Events */
.cursor-pointer {
  cursor: pointer;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-auto {
  cursor: auto;
}

.pointer-events-none {
  pointer-events: none;
}


/* ========================================
   POSITIONING
   ======================================== */

/* Position */
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.sticky {
  position: sticky;
}

.fixed {
  position: fixed;
}

.inset-0 {
  inset: var(--spacing-0);
}

.bottom-0 {
  bottom: var(--spacing-0);
}

.top-0 {
  top: var(--spacing-0);
}

.left-0 {
  left: var(--spacing-0);
}

.right-0 {
  right: var(--spacing-0);
}


/* Z-Index & Opacity */
.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

.z-auto {
  z-index: auto;
}

.z-5-less {
  z-index: -5;
}

.opacity-0 {
  opacity: 0;
}

.opacity-10 {
  opacity: var(--opacity-10);
}

.opacity-20 {
  opacity: var(--opacity-20);
}

.opacity-50 {
  opacity: var(--opacity-50);
}

.opacity-70 {
  opacity: var(--opacity-70);
}

.opacity-100 {
  opacity: var(--opacity-100);
}


/* ========================================
   UTILITIES
   ======================================== */

/* List & Reset Utilities */
.list-none {
  list-style-type: none;
}

.ps-0 {
  padding-inline-start: unset;
}

.ms-0 {
  margin-inline-start: unset;
}

label {
  margin: unset;
}


/* Transitions */
.ease {
  transition: transform 0.25s ease;
}

.ease-in-out {
  transition: all 0.25s ease-in-out;
}


/* Transforms */
.rotate-less-45 {
  transform: rotate(-45deg);
}

.rotate-45 {
  transform: rotate(45deg);
}

.rotate-90 {
  transform: rotate(90deg);
}

.rotate-180 {
  transform: rotate(180deg);
}


/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* Large Screens (max-width: 991px) */
@media (max-width: 991px) {
  .lg-grid-cols-1 {
    grid-template-columns: var(--grid-cols-1);
  }

  .lg-grid-cols-2 {
    grid-template-columns: var(--grid-cols-2);
  }

  .lg-grid-cols-3 {
    grid-template-columns: var(--grid-cols-3);
  }

  .lg-grid-cols-4 {
    grid-template-columns: var(--grid-cols-4);
  }

  .lg-grid-cols-5 {
    grid-template-columns: var(--grid-cols-5);
  }

  .lg-grid-cols-6 {
    grid-template-columns: var(--grid-cols-6);
  }

  .lg-row-span-1 {
    grid-row: var(--span-1) / var(--span-1);
  }

  .lg-row-span-2 {
    grid-row: var(--span-2) / var(--span-2);
  }

  .lg-row-span-3 {
    grid-row: var(--span-3) / var(--span-3);
  }

  .lg-col-span-1 {
    grid-column: var(--span-1) / var(--span-1);
  }

  .lg-col-span-2 {
    grid-column: var(--span-2) / var(--span-2);
  }

  .lg-col-span-3 {
    grid-column: var(--span-3) / var(--span-3);
  }

  .lg-order-1 {
    order: 1;
  }

  .lg-order-2 {
    order: 2;
  }

  .lg-order-3 {
    order: 3;
  }

  .lg-order-first {
    order: -999;
  }

  .lg-order-last {
    order: 999;
  }

  .lg-w-full {
    width: var(--1by1);
  }

  .lg-w-1by2 {
    width: var(--1by2);
  }

  .lg-w-2by3 {
    width: var(--2by3);
  }

  .lg-w-3by4 {
    width: var(--3by4);
  }

  .lg-w-3by5 {
    width: var(--3by5);
  }

  .lg-w-4by5 {
    width: var(--4by5);
  }

  .lg-w-5by6 {
    width: var(--5by6);
  }
}


/* Medium Screens (max-width: 767px) */
@media (max-width: 767px) {
  .md-text-center {
    text-align: center;
  }

  .md-text-left {
    text-align: left;
  }

  .md-flex {
    display: flex;
  }

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

  .md-flex-col-reverse {
    flex-direction: column-reverse;
  }

  .md-flex-row-reverse {
    flex-direction: row-reverse;
  }

  .md-grid-cols-1 {
    grid-template-columns: var(--grid-cols-1);
  }

  .md-grid-cols-2 {
    grid-template-columns: var(--grid-cols-2);
  }

  .md-grid-cols-3 {
    grid-template-columns: var(--grid-cols-3);
  }

  .md-grid-cols-4 {
    grid-template-columns: var(--grid-cols-4);
  }

  .md-grid-cols-5 {
    grid-template-columns: var(--grid-cols-5);
  }

  .md-row-span-1 {
    grid-row: var(--span-1) / var(--span-1);
  }

  .md-row-span-2 {
    grid-row: var(--span-2) / var(--span-2);
  }

  .md-col-span-1 {
    grid-column: var(--span-1) / var(--span-1);
  }

  .md-col-span-2 {
    grid-column: var(--span-2) / var(--span-2);
  }

  .md-hidden {
    display: none;
  }

  .md-block {
    display: block;
  }

  .md-order-1 {
    order: 1;
  }

  .md-order-2 {
    order: 2;
  }

  .md-order-3 {
    order: 3;
  }

  .md-order-first {
    order: -999;
  }

  .md-order-last {
    order: 999;
  }

  .md-w-full {
    width: var(--1by1);
  }

  .md-w-1by2 {
    width: var(--1by2);
  }

  .md-w-2by3 {
    width: var(--2by3);
  }

  .md-w-3by4 {
    width: var(--3by4);
  }

  .md-w-3by5 {
    width: var(--3by5);
  }

  .md-w-4by5 {
    width: var(--4by5);
  }

  .md-w-5by6 {
    width: var(--5by6);
  }
}


/* Small Screens (max-width: 478px) */
@media (max-width: 478px) {
  .sm-grid-cols-1 {
    grid-template-columns: var(--grid-cols-1);
  }

  .sm-grid-cols-2 {
    grid-template-columns: var(--grid-cols-2);
  }

  .sm-grid-cols-3 {
    grid-template-columns: var(--grid-cols-3);
  }

  .sm-order-1 {
    order: 1;
  }

  .sm-order-2 {
    order: 2;
  }

  .sm-order-3 {
    order: 3;
  }

  .sm-order-first {
    order: -999;
  }

  .sm-order-last {
    order: 999;
  }

  .sm-w-full {
    width: var(--1by1);
  }

  .sm-w-2by3 {
    width: var(--2by3);
  }

  .sm-w-3by4 {
    width: var(--3by4);
  }

  .sm-w-4by5 {
    width: var(--4by5);
  }

  .sm-w-5by6 {
    width: var(--5by6);
  }
}