/**
 * Utility Classes System
 * Bootstrap-Style Utilities - Mobile-First Approach
 * 
 * File: utilities.css
 * Author: Andrea Ricciotti
 * Version: 2.1.0
 *
 * Features:
 * - Column widths (percentage-based)
 * - Display utilities
 * - Text alignment
 * - Flexbox utilities
 * - Spacing (padding/margin) with --gutter variable
 * - Height utilities (vh and %)
 * - Positioning utilities
 * - Order utilities
 * - Overflow utilities
 * - Z-index utilities
 * - Opacity utilities
 * - Cursor utilities
 * - CSS Grid utilities
 * 
 * Implemented Breakpoints:
 * - Base (mobile): < 768px
 * - md: >= 768px (tablets)
 * - lg: >= 992px (desktops)
 * 
 * Available for future implementation:
 * - sm: >= 576px (landscape phones) - Not implemented
 * - xl: >= 1200px (large desktops) - Not implemented
 * - xxl: >= 1400px (larger desktops) - Not implemented
 * 
 * CSS Variables Required:
 * --gutter: 1rem (default spacing unit)
 * --vh: 1vh (for mobile viewport fix - set via JavaScript)
 */


/* ========================================
   ! BASE (Mobile First - < 768px)
   ======================================== */

/* ! - Column width utilities (percentage-based) */
.col-100 { width: 100%; }
.col-90 { width: 90%; }
.col-80 { width: 80%; }
.col-75 { width: 75%; }
.col-70 { width: 70%; }
.col-60 { width: 60%; }
.col-50 { width: 50%; }
.col-40 { width: 40%; }
.col-33 { width: 33.333%; }
.col-30 { width: 30%; }
.col-25 { width: 25%; }
.col-20 { width: 20%; }
.col-10 { width: 10%; }
.col-auto { width: auto; flex:1;}

/* ! - Display utilities */
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex;}
.d-inline-flex { display: inline-flex; }
.d-grid { display: grid; }
.d-none { display: none; }
.hidden {visibility: hidden;}

/* ! - Text alignment */
.text-start { text-align: left; }
.text-center { text-align: center; }
.text-end { text-align: right; }
ul.no-list {list-style-type: none; padding-inline-start: 0;}
:where(ul.no-list > li) {padding-bottom: 5px;}

/* ! - CSS Grid Layout - Auto responsive */
.grid-auto {
  display: grid;
  gap: var(--gutter);
}

.grid-auto--sm { 
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
}

.grid-auto--md { 
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
}

.grid-auto--lg { 
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); 
}

/* ! - CSS Grid Layout - Explicit columns */
.grid-cols-1 { 
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--gutter);
}

.grid-cols-2 { 
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gutter);
}

.grid-cols-3 { 
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
}

.grid-cols-4 { 
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
}

.grid-cols-5 { 
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--gutter);
}

.grid-cols-6 { 
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--gutter);
}

/* ! - Flexbox - Justify Content */
.justify-content-start { justify-content: flex-start; }
.justify-content-end { justify-content: flex-end; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-around { justify-content: space-around; }
.justify-content-evenly { justify-content: space-evenly; }

/* ! - Flexbox - Align Items */
.align-items-start { align-items: flex-start; }
.align-items-end { align-items: flex-end; }
.align-items-center { align-items: center; }
.align-items-baseline { align-items: baseline; }
.align-items-stretch { align-items: stretch; }

/* ! - Flexbox - Align Self */
.align-self-start { align-self: flex-start; }
.align-self-end { align-self: flex-end; }
.align-self-center { align-self: center; }
.align-self-baseline { align-self: baseline; }
.align-self-stretch { align-self: stretch; }

/* ! - Flexbox - Direction */
.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-column { flex-direction: column; }
.flex-column-reverse { flex-direction: column-reverse; }

/* ! - Flexbox - Wrap */
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }

/* ! - Flexbox - Grow & Shrink */
.flex-grow-0 { flex-grow: 0; }
.flex-grow-1 { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-shrink-1 { flex-shrink: 1; }
.flex-none {flex: none;}

/* ! - Flexbox - Gap */
.gap-0 { gap: 0; }
.gap-1 { gap: var(--gutter); }
.gap-2 { gap: calc(var(--gutter) * 1.5); }
.gap-3 { gap: calc(var(--gutter) * 2); }
.gap-4 { gap: calc(var(--gutter) * 2.5); }
.gap-5 { gap: calc(var(--gutter) * 3); }
.gap-6 { gap: calc(var(--gutter) * 4); }
.gap-7 { gap: calc(var(--gutter) * 5); }

/* ! - Positioning */
.position-static { position: static; }
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }
.position-sticky { position: sticky; }

/* ! - Position coordinates */
.top-0 { top: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.inset-0 { top: 0; bottom: 0; left: 0; right: 0; }

/* ! - Order */
.order-0 { order: 0; }
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }
.order-6 { order: 6; }

/* ! - Overflow */
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }
.overflow-x-auto { overflow-x: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-auto { overflow-y: auto; }
.overflow-y-hidden { overflow-y: hidden; }

/* ! - Z-index */
.z-0 { z-index: 0; }
.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-100 { z-index: 100; }
.z-auto { z-index: auto; }

/* ! - Opacity */
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-90 { opacity: 0.9; }
.opacity-100 { opacity: 1; }

/* ! - Cursor */
.cursor-auto { cursor: auto; }
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-grab { cursor: grab; }
.cursor-grabbing { cursor: grabbing; }

/* ! - Height utilities - Viewport Height */
.vh-100 { height: 100vh; height: calc(var(--vh, 1vh) * 100);}
.vh-80 { height: 80vh; height: calc(var(--vh, 1vh) * 80); }
.vh-70 { height: 70vh; height: calc(var(--vh, 1vh) * 70); }
.vh-60 { height: 60vh; height: calc(var(--vh, 1vh) * 60); }
.vh-50 { height: 50vh; height: calc(var(--vh, 1vh) * 50); }
.vh-40 { height: 40vh; height: calc(var(--vh, 1vh) * 40); }
.vh-auto { height: auto; }

/* ! - Height utilities - Percentage */
.h-100 { height: 100%; }
.h-80 { height: 80%; }
.h-70 { height: 70%; }
.h-60 { height: 60%; }
.h-50 { height: 50%; }
.h-40 { height: 40%; }
.h-auto { height: auto; }

/* ! - Spacing - Padding Y (Top & Bottom) */
.p-0, .py-0, .pt-0 { padding-top: 0; }
.p-1, .py-1, .pt-1 { padding-top: var(--gutter); }
.p-2, .py-2, .pt-2 { padding-top: calc(var(--gutter) * 1.5); }
.p-3, .py-3, .pt-3 { padding-top: calc(var(--gutter) * 2); }
.p-4, .py-4, .pt-4 { padding-top: calc(var(--gutter) * 2.5); }
.p-5, .py-5, .pt-5 { padding-top: calc(var(--gutter) * 3); }
.p-6, .py-6, .pt-6 { padding-top: calc(var(--gutter) * 4); }
.p-7, .py-7, .pt-7 { padding-top: calc(var(--gutter) * 5); }

.p-0, .py-0, .pb-0 { padding-bottom: 0; }
.p-1, .py-1, .pb-1 { padding-bottom: var(--gutter); }
.p-2, .py-2, .pb-2 { padding-bottom: calc(var(--gutter) * 1.5); }
.p-3, .py-3, .pb-3 { padding-bottom: calc(var(--gutter) * 2); }
.p-4, .py-4, .pb-4 { padding-bottom: calc(var(--gutter) * 2.5); }
.p-5, .py-5, .pb-5 { padding-bottom: calc(var(--gutter) * 3); }
.p-6, .py-6, .pb-6 { padding-bottom: calc(var(--gutter) * 4); }
.p-7, .py-7, .pb-7 { padding-bottom: calc(var(--gutter) * 5); }

/* ! - Spacing - Padding X (Left & Right) */
.p-0, .px-0, .ps-0 { padding-left: 0; }
.p-1, .px-1, .ps-1 { padding-left: var(--gutter); }
.p-2, .px-2, .ps-2 { padding-left: calc(var(--gutter) * 1.5); }
.p-3, .px-3, .ps-3 { padding-left: calc(var(--gutter) * 2); }
.p-4, .px-4, .ps-4 { padding-left: calc(var(--gutter) * 2.5); }
.p-5, .px-5, .ps-5 { padding-left: calc(var(--gutter) * 3); }
.p-6, .px-6, .ps-6 { padding-left: calc(var(--gutter) * 4); }
.p-7, .px-7, .ps-7 { padding-left: calc(var(--gutter) * 5); }

.p-0, .px-0, .pe-0 { padding-right: 0; }
.p-1, .px-1, .pe-1 { padding-right: var(--gutter); }
.p-2, .px-2, .pe-2 { padding-right: calc(var(--gutter) * 1.5); }
.p-3, .px-3, .pe-3 { padding-right: calc(var(--gutter) * 2); }
.p-4, .px-4, .pe-4 { padding-right: calc(var(--gutter) * 2.5); }
.p-5, .px-5, .pe-5 { padding-right: calc(var(--gutter) * 3); }
.p-6, .px-6, .pe-6 { padding-right: calc(var(--gutter) * 4); }
.p-7, .px-7, .pe-7 { padding-right: calc(var(--gutter) * 5); }

/* ! - Spacing - Margin Y (Top & Bottom) */
.m-0, .my-0, .mt-0 { margin-top: 0; }
.m-1, .my-1, .mt-1 { margin-top: var(--gutter); }
.m-2, .my-2, .mt-2 { margin-top: calc(var(--gutter) * 1.5); }
.m-3, .my-3, .mt-3 { margin-top: calc(var(--gutter) * 2); }
.m-4, .my-4, .mt-4 { margin-top: calc(var(--gutter) * 2.5); }
.m-5, .my-5, .mt-5 { margin-top: calc(var(--gutter) * 3); }
.m-6, .my-6, .mt-6 { margin-top: calc(var(--gutter) * 4); }
.m-7, .my-7, .mt-7 { margin-top: calc(var(--gutter) * 5); }

.m-0, .my-0, .mb-0 { margin-bottom: 0; }
.m-1, .my-1, .mb-1 { margin-bottom: var(--gutter); }
.m-2, .my-2, .mb-2 { margin-bottom: calc(var(--gutter) * 1.5); }
.m-3, .my-3, .mb-3 { margin-bottom: calc(var(--gutter) * 2); }
.m-4, .my-4, .mb-4 { margin-bottom: calc(var(--gutter) * 2.5); }
.m-5, .my-5, .mb-5 { margin-bottom: calc(var(--gutter) * 3); }
.m-6, .my-6, .mb-6 { margin-bottom: calc(var(--gutter) * 4); }
.m-7, .my-7, .mb-7 { margin-bottom: calc(var(--gutter) * 5); }

/* ! - Spacing - Margin X (Left & Right) */
.m-0, .mx-0, .ms-0 { margin-left: 0; }
.m-1, .mx-1, .ms-1 { margin-left: var(--gutter); }
.m-2, .mx-2, .ms-2 { margin-left: calc(var(--gutter) * 1.5); }
.m-3, .mx-3, .ms-3 { margin-left: calc(var(--gutter) * 2); }
.m-4, .mx-4, .ms-4 { margin-left: calc(var(--gutter) * 2.5); }
.m-5, .mx-5, .ms-5 { margin-left: calc(var(--gutter) * 3); }
.m-6, .mx-6, .ms-6 { margin-left: calc(var(--gutter) * 4); }
.m-7, .mx-7, .ms-7 { margin-left: calc(var(--gutter) * 5); }
.mx-auto { margin-left: auto; }

.m-0, .mx-0, .me-0 { margin-right: 0; }
.m-1, .mx-1, .me-1 { margin-right: var(--gutter); }
.m-2, .mx-2, .me-2 { margin-right: calc(var(--gutter) * 1.5); }
.m-3, .mx-3, .me-3 { margin-right: calc(var(--gutter) * 2); }
.m-4, .mx-4, .me-4 { margin-right: calc(var(--gutter) * 2.5); }
.m-5, .mx-5, .me-5 { margin-right: calc(var(--gutter) * 3); }
.m-6, .mx-6, .me-6 { margin-right: calc(var(--gutter) * 4); }
.m-7, .mx-7, .me-7 { margin-right: calc(var(--gutter) * 5); }
.mx-auto { margin-right: auto; }

.m-auto { margin: auto; }

/* ========================================
   ! CONTAINER-ALIGNED SPACING
   ======================================== */

/* Padding aligned to grid margins */
.px-container, .ps-container {padding-left: var(--grid-margin);}
.px-container, .pe-container {padding-right: var(--grid-margin);}

/* Margin aligned to grid margins */
.mx-container, .ms-container {margin-left: var(--grid-margin);}
.mx-container, .me-container {margin-right: var(--grid-margin);}

/* ========================================
   SM - Small devices (>= 576px)
   NOT IMPLEMENTED - Available for future use
   ======================================== */

/* 
To implement SM breakpoint, add @media (min-width: 576px) with:
- .col-sm-*, .d-sm-*, .text-sm-*
- .justify-content-sm-*, .align-items-sm-*
- .flex-sm-*, .vh-sm-*, .h-sm-*
- .p-sm-*, .m-sm-* and all directional variants
*/


/* ========================================
   ! MD - Medium devices (>= 768px)
   ======================================== */

@media (min-width: 768px) {
  /* ! - Column width utilities */
  .col-md-100 { width: 100%; }
  .col-md-90 { width: 90%; }
  .col-md-80 { width: 80%; }
  .col-md-75 { width: 75%; }
  .col-md-70 { width: 70%; }
  .col-md-60 { width: 60%; }
  .col-md-50 { width: 50%; }
  .col-md-40 { width: 40%; }
  .col-md-33 { width: 33.333%; }
  .col-md-30 { width: 30%; }
  .col-md-25 { width: 25%; }
  .col-md-20 { width: 20%; }
  .col-md-10 { width: 10%; }
  .col-md-auto { width: auto; flex: 1;}

  /* ! - Display utilities */
  .d-md-block { display: block; }
  .d-md-inline { display: inline; }
  .d-md-inline-block { display: inline-block; }
  .d-md-flex { display: flex; }
  .d-md-inline-flex { display: inline-flex; }
  .d-md-grid { display: grid; }
  .d-md-none { display: none; }

  /* ! - Text alignment */
  .text-md-start { text-align: left; }
  .text-md-center { text-align: center; }
  .text-md-end { text-align: right; }

    /* ! - CSS Grid Layout - Explicit columns responsive */
  .grid-cols-md-1 { grid-template-columns: repeat(1, 1fr); }
  .grid-cols-md-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-md-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-cols-md-4 { grid-template-columns: repeat(4, 1fr); }
  .grid-cols-md-5 { grid-template-columns: repeat(5, 1fr); }
  .grid-cols-md-6 { grid-template-columns: repeat(6, 1fr); }


  /* ! - Flexbox - Justify Content */
  .justify-content-md-start { justify-content: flex-start; }
  .justify-content-md-end { justify-content: flex-end; }
  .justify-content-md-center { justify-content: center; }
  .justify-content-md-between { justify-content: space-between; }
  .justify-content-md-around { justify-content: space-around; }
  .justify-content-md-evenly { justify-content: space-evenly; }

  /* ! - Flexbox - Align Items */
  .align-items-md-start { align-items: flex-start; }
  .align-items-md-end { align-items: flex-end; }
  .align-items-md-center { align-items: center; }
  .align-items-md-baseline { align-items: baseline; }
  .align-items-md-stretch { align-items: stretch; }

  /* ! - Flexbox - Align Self */
  .align-self-md-start { align-self: flex-start; }
  .align-self-md-end { align-self: flex-end; }
  .align-self-md-center { align-self: center; }
  .align-self-md-baseline { align-self: baseline; }
  .align-self-md-stretch { align-self: stretch; }

  /* ! - Flexbox - Direction */
  .flex-md-row { flex-direction: row; }
  .flex-md-row-reverse { flex-direction: row-reverse; }
  .flex-md-column { flex-direction: column; }
  .flex-md-column-reverse { flex-direction: column-reverse; }

  /* ! - Flexbox - Wrap */
  .flex-md-wrap { flex-wrap: wrap; }
  .flex-md-nowrap { flex-wrap: nowrap; }
  .flex-md-wrap-reverse { flex-wrap: wrap-reverse; }

  /* ! - Flexbox - Grow & Shrink */
  .flex-md-grow-0 { flex-grow: 0; }
  .flex-md-grow-1 { flex-grow: 1; }
  .flex-md-shrink-0 { flex-shrink: 0; }
  .flex-md-shrink-1 { flex-shrink: 1; }

  /* ! - Flexbox - Gap */
  .gap-md-0 { gap: 0; }
  .gap-md-1 { gap: var(--gutter); }
  .gap-md-2 { gap: calc(var(--gutter) * 1.5); }
  .gap-md-3 { gap: calc(var(--gutter) * 2); }
  .gap-md-4 { gap: calc(var(--gutter) * 2.5); }
  .gap-md-5 { gap: calc(var(--gutter) * 3); }
  .gap-md-6 { gap: calc(var(--gutter) * 4); }
  .gap-md-7 { gap: calc(var(--gutter) * 5); }

  /* ! - Positioning */
  .position-md-static { position: static; }
  .position-md-relative { position: relative; }
  .position-md-absolute { position: absolute; }
  .position-md-fixed { position: fixed; }
  .position-md-sticky { position: sticky; }

  /* ! - Order */
  .order-md-0 { order: 0; }
  .order-md-1 { order: 1; }
  .order-md-2 { order: 2; }
  .order-md-3 { order: 3; }
  .order-md-4 { order: 4; }
  .order-md-5 { order: 5; }
  .order-md-6 { order: 6; }

  /* ! - Height utilities - Viewport Height */
  .vh-md-100 { height: 100vh; height: calc(var(--vh, 1vh) * 100);}
  .vh-md-80 { height: 80vh; height: calc(var(--vh, 1vh) * 80); }
  .vh-md-70 { height: 70vh; height: calc(var(--vh, 1vh) * 70); }
  .vh-md-60 { height: 60vh; height: calc(var(--vh, 1vh) * 60); }
  .vh-md-50 { height: 50vh; height: calc(var(--vh, 1vh) * 50); }
  .vh-md-40 { height: 40vh; height: calc(var(--vh, 1vh) * 40); }
  .vh-md-auto { height: auto; }

  /* ! - Height utilities - Percentage */
  .h-md-100 { height: 100%; }
  .h-md-80 { height: 80%; }
  .h-md-70 { height: 70%; }
  .h-md-60 { height: 60%; }
  .h-md-50 { height: 50%; }
  .h-md-40 { height: 40%; }
  .h-md-auto { height: auto; }

  /* ! - Spacing - Padding Y (Top & Bottom) */
  .p-md-0, .py-md-0, .pt-md-0 { padding-top: 0; }
  .p-md-1, .py-md-1, .pt-md-1 { padding-top: var(--gutter); }
  .p-md-2, .py-md-2, .pt-md-2 { padding-top: calc(var(--gutter) * 1.5); }
  .p-md-3, .py-md-3, .pt-md-3 { padding-top: calc(var(--gutter) * 2); }
  .p-md-4, .py-md-4, .pt-md-4 { padding-top: calc(var(--gutter) * 2.5); }
  .p-md-5, .py-md-5, .pt-md-5 { padding-top: calc(var(--gutter) * 3); }
  .p-md-6, .py-md-6, .pt-md-6 { padding-top: calc(var(--gutter) * 4); }
  .p-md-7, .py-md-7, .pt-md-7 { padding-top: calc(var(--gutter) * 5); }

  .p-md-0, .py-md-0, .pb-md-0 { padding-bottom: 0; }
  .p-md-1, .py-md-1, .pb-md-1 { padding-bottom: var(--gutter); }
  .p-md-2, .py-md-2, .pb-md-2 { padding-bottom: calc(var(--gutter) * 1.5); }
  .p-md-3, .py-md-3md-, .pb-md-3 { padding-bottom: calc(var(--gutter) * 2); }
  .p-md-4, .py-md-4, .pb-md-4 { padding-bottom: calc(var(--gutter) * 2.5); }
  .p-md-5, .py-md-5, .pb-md-5 { padding-bottom: calc(var(--gutter) * 3); }
  .p-md-6, .py-md-6, .pb-md-6 { padding-bottom: calc(var(--gutter) * 4); }
  .p-md-7, .py-md-7, .pb-md-7 { padding-bottom: calc(var(--gutter) * 5); }

  /* ! - Spacing - Padding X (Left & Right) */
  .p-md-0, .px-md-0, .ps-md-0 { padding-left: 0; }
  .p-md-1, .px-md-1, .ps-md-1 { padding-left: var(--gutter); }
  .p-md-2, .px-md-2, .ps-md-2 { padding-left: calc(var(--gutter) * 1.5); }
  .p-md-3, .px-md-3, .ps-md-3 { padding-left: calc(var(--gutter) * 2); }
  .p-md-4, .px-md-4, .ps-md-4 { padding-left: calc(var(--gutter) * 2.5); }
  .p-md-5, .px-md-5, .ps-md-5 { padding-left: calc(var(--gutter) * 3); }
  .p-md-6, .px-md-6, .ps-md-6 { padding-left: calc(var(--gutter) * 4); }
  .p-md-7, .px-md-7, .ps-md-7 { padding-left: calc(var(--gutter) * 5); }

  .p-md-0, .px-md-0, .pe-md-0 { padding-right: 0; }
  .p-md-1, .px-md-1, .pe-md-1 { padding-right: var(--gutter); }
  .p-md-2, .px-md-2, .pe-md-2 { padding-right: calc(var(--gutter) * 1.5); }
  .p-md-3, .px-md-3, .pe-md-3 { padding-right: calc(var(--gutter) * 2); }
  .p-md-4, .px-md-4, .pe-md-4 { padding-right: calc(var(--gutter) * 2.5); }
  .p-md-5, .px-md-5, .pe-md-5 { padding-right: calc(var(--gutter) * 3); }
  .p-md-6, .px-md-6, .pe-md-6 { padding-right: calc(var(--gutter) * 4); }
  .p-md-7, .px-md-7, .pe-md-7 { padding-right: calc(var(--gutter) * 5); }

  /* ! - Spacing - Margin Y (Top & Bottom) */
  .m-md-0, .my-md-0, .mt-md-0 { margin-top: 0; }
  .m-md-1, .my-md-1, .mt-md-1 { margin-top: var(--gutter); }
  .m-md-2, .my-md-2, .mt-md-2 { margin-top: calc(var(--gutter) * 1.5); }
  .m-md-3, .my-md-3, .mt-md-3 { margin-top: calc(var(--gutter) * 2); }
  .m-md-4, .my-md-4, .mt-md-4 { margin-top: calc(var(--gutter) * 2.5); }
  .m-md-5, .my-md-5, .mt-md-5 { margin-top: calc(var(--gutter) * 3); }
  .m-md-6, .my-md-6, .mt-md-6 { margin-top: calc(var(--gutter) * 4); }
  .m-md-7, .my-md-7, .mt-md-7 { margin-top: calc(var(--gutter) * 5); }

  .m-md-0, .my-md-0, .mb-md-0 { margin-bottom: 0; }
  .m-md-1, .my-md-1, .mb-md-1 { margin-bottom: var(--gutter); }
  .m-md-2, .my-md-2, .mb-md-2 { margin-bottom: calc(var(--gutter) * 1.5); }
  .m-md-3, .my-md-3, .mb-md-3 { margin-bottom: calc(var(--gutter) * 2); }
  .m-md-4, .my-md-4, .mb-md-4 { margin-bottom: calc(var(--gutter) * 2.5); }
  .m-md-5, .my-md-5, .mb-md-5 { margin-bottom: calc(var(--gutter) * 3); }
  .m-md-6, .my-md-6, .mb-md-6 { margin-bottom: calc(var(--gutter) * 4); }
  .m-md-7, .my-md-7, .mb-md-7 { margin-bottom: calc(var(--gutter) * 5); }

  /* ! - Spacing - Margin X (Left & Right) */
  .m-md-0, .mx-md-0, .ms-md-0 { margin-left: 0; }
  .m-md-1, .mx-md-1, .ms-md-1 { margin-left: var(--gutter); }
  .m-md-2, .mx-md-2, .ms-md-2 { margin-left: calc(var(--gutter) * 1.5); }
  .m-md-3, .mx-md-3, .ms-md-3 { margin-left: calc(var(--gutter) * 2); }
  .m-md-4, .mx-md-4, .ms-md-4 { margin-left: calc(var(--gutter) * 2.5); }
  .m-md-5, .mx-md-5, .ms-md-5 { margin-left: calc(var(--gutter) * 3); }
  .m-md-6, .mx-md-6, .ms-md-6 { margin-left: calc(var(--gutter) * 4); }
  .m-md-7, .mx-md-7, .ms-md-7 { margin-left: calc(var(--gutter) * 5); }
  .mx-md-auto { margin-left: auto; }

  .m-md-0, .mx-md-0, .me-md-0 { margin-right: 0; }
  .m-md-1, .mx-md-1, .me-md-1 { margin-right: var(--gutter); }
  .m-md-2, .mx-md-2, .me-md-2 { margin-right: calc(var(--gutter) * 1.5); }
  .m-md-3, .mx-md-3, .me-md-3 { margin-right: calc(var(--gutter) * 2); }
  .m-md-4, .mx-md-4, .me-md-4 { margin-right: calc(var(--gutter) * 2.5); }
  .m-md-5, .mx-md-5, .me-md-5 { margin-right: calc(var(--gutter) * 3); }
  .m-md-6, .mx-md-6, .me-md-6 { margin-right: calc(var(--gutter) * 4); }
  .m-md-7, .mx-md-7, .me-md-7 { margin-right: calc(var(--gutter) * 5); }
  .mx-md-auto { margin-right: auto; }

  .m-md-auto { margin: auto; }
}


/* ========================================
   ! LG - Large devices (>= 992px)
   ======================================== */

@media (min-width: 992px) {
  /* ! - Column width utilities */
  .col-lg-100 { width: 100%; }
  .col-lg-90 { width: 90%; }
  .col-lg-80 { width: 80%; }
  .col-lg-75 { width: 75%; }
  .col-lg-70 { width: 70%; }
  .col-lg-60 { width: 60%; }
  .col-lg-50 { width: 50%; }
  .col-lg-40 { width: 40%; }
  .col-lg-33 { width: 33.333%; }
  .col-lg-30 { width: 30%; }
  .col-lg-25 { width: 25%; }
  .col-lg-20 { width: 20%; }
  .col-lg-10 { width: 10%; }
  .col-lg-auto { width: auto; flex: 1;}

  /* ! - Display utilities */
  .d-lg-block { display: block; }
  .d-lg-inline { display: inline; }
  .d-lg-inline-block { display: inline-block; }
  .d-lg-flex { display: flex; }
  .d-lg-inline-flex { display: inline-flex; }
  .d-lg-grid { display: grid; }
  .d-lg-none { display: none; }

  /* ! - Text alignment */
  .text-lg-start { text-align: left; }
  .text-lg-center { text-align: center; }
  .text-lg-end { text-align: right; }

  /* ! - CSS Grid Layout - Explicit columns responsive */
  .grid-cols-lg-1 { grid-template-columns: repeat(1, 1fr); }
  .grid-cols-lg-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-lg-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-cols-lg-4 { grid-template-columns: repeat(4, 1fr); }
  .grid-cols-lg-5 { grid-template-columns: repeat(5, 1fr); }
  .grid-cols-lg-6 { grid-template-columns: repeat(6, 1fr); }


  /* ! - Flexbox - Justify Content */
  .justify-content-lg-start { justify-content: flex-start; }
  .justify-content-lg-end { justify-content: flex-end; }
  .justify-content-lg-center { justify-content: center; }
  .justify-content-lg-between { justify-content: space-between; }
  .justify-content-lg-around { justify-content: space-around; }
  .justify-content-lg-evenly { justify-content: space-evenly; }

  /* ! - Flexbox - Align Items */
  .align-items-lg-start { align-items: flex-start; }
  .align-items-lg-end { align-items: flex-end; }
  .align-items-lg-center { align-items: center; }
  .align-items-lg-baseline { align-items: baseline; }
  .align-items-lg-stretch { align-items: stretch; }

  /* ! - Flexbox - Align Self */
  .align-self-lg-start { align-self: flex-start; }
  .align-self-lg-end { align-self: flex-end; }
  .align-self-lg-center { align-self: center; }
  .align-self-lg-baseline { align-self: baseline; }
  .align-self-lg-stretch { align-self: stretch; }

  /* ! - Flexbox - Direction */
  .flex-lg-row { flex-direction: row; }
  .flex-lg-row-reverse { flex-direction: row-reverse; }
  .flex-lg-column { flex-direction: column; }
  .flex-lg-column-reverse { flex-direction: column-reverse; }

  /* ! - Flexbox - Wrap */
  .flex-lg-wrap { flex-wrap: wrap; }
  .flex-lg-nowrap { flex-wrap: nowrap; }
  .flex-lg-wrap-reverse { flex-wrap: wrap-reverse; }

  /* ! - Flexbox - Grow & Shrink */
  .flex-lg-grow-0 { flex-grow: 0; }
  .flex-lg-grow-1 { flex-grow: 1; }
  .flex-lg-shrink-0 { flex-shrink: 0; }
  .flex-lg-shrink-1 { flex-shrink: 1; }

  /* ! - Flexbox - Gap */
  .gap-lg-0 { gap: 0; }
  .gap-lg-1 { gap: var(--gutter); }
  .gap-lg-2 { gap: calc(var(--gutter) * 1.5); }
  .gap-lg-3 { gap: calc(var(--gutter) * 2); }
  .gap-lg-4 { gap: calc(var(--gutter) * 2.5); }
  .gap-lg-5 { gap: calc(var(--gutter) * 3); }
  .gap-lg-6 { gap: calc(var(--gutter) * 4); }
  .gap-lg-7 { gap: calc(var(--gutter) * 5); }

  /* ! - Positioning */
  .position-lg-static { position: static; }
  .position-lg-relative { position: relative; }
  .position-lg-absolute { position: absolute; }
  .position-lg-fixed { position: fixed; }
  .position-lg-sticky { position: sticky; }

  /* ! - Order */
  .order-lg-0 { order: 0; }
  .order-lg-1 { order: 1; }
  .order-lg-2 { order: 2; }
  .order-lg-3 { order: 3; }
  .order-lg-4 { order: 4; }
  .order-lg-5 { order: 5; }
  .order-lg-6 { order: 6; }

  /* ! - Height utilities - Viewport Height */
  .vh-lg-100 { height: 100vh; height: calc(var(--vh, 1vh) * 100);}
  .vh-lg-80 { height: 80vh; height: calc(var(--vh, 1vh) * 80); }
  .vh-lg-70 { height: 70vh; height: calc(var(--vh, 1vh) * 70); }
  .vh-lg-60 { height: 60vh; height: calc(var(--vh, 1vh) * 60); }
  .vh-lg-50 { height: 50vh; height: calc(var(--vh, 1vh) * 50); }
  .vh-lg-40 { height: 40vh; height: calc(var(--vh, 1vh) * 40); }
  .vh-lg-auto { height: auto; }

  /* ! - Height utilities - Percentage */
  .h-lg-100 { height: 100%; }
  .h-lg-80 { height: 80%; }
  .h-lg-70 { height: 70%; }
  .h-lg-60 { height: 60%; }
  .h-lg-50 { height: 50%; }
  .h-lg-40 { height: 40%; }
  .h-lg-auto { height: auto; }

  /* ! - Spacing - Padding Y (Top & Bottom) */
  .p-lg-0, .py-lg-0, .pt-lg-0 { padding-top: 0; }
  .p-lg-1, .py-lg-1, .pt-lg-1 { padding-top: var(--gutter); }
  .p-lg-2, .py-lg-2, .pt-lg-2 { padding-top: calc(var(--gutter) * 1.5); }
  .p-lg-3, .py-lg-3, .pt-lg-3 { padding-top: calc(var(--gutter) * 2); }
  .p-lg-4, .py-lg-4, .pt-lg-4 { padding-top: calc(var(--gutter) * 2.5); }
  .p-lg-5, .py-lg-5, .pt-lg-5 { padding-top: calc(var(--gutter) * 3); }
  .p-lg-6, .py-lg-6, .pt-lg-6 { padding-top: calc(var(--gutter) * 4); }
  .p-lg-7, .py-lg-7, .pt-lg-7 { padding-top: calc(var(--gutter) * 5); }

  .p-lg-0, .py-lg-0, .pb-lg-0 { padding-bottom: 0; }
  .p-lg-1, .py-lg-1, .pb-lg-1 { padding-bottom: var(--gutter); }
  .p-lg-2, .py-lg-2, .pb-lg-2 { padding-bottom: calc(var(--gutter) * 1.5); }
  .p-lg-3, .py-lg-3md-, .pb-lg-3 { padding-bottom: calc(var(--gutter) * 2); }
  .p-lg-4, .py-lg-4, .pb-lg-4 { padding-bottom: calc(var(--gutter) * 2.5); }
  .p-lg-5, .py-lg-5, .pb-lg-5 { padding-bottom: calc(var(--gutter) * 3); }
  .p-lg-6, .py-lg-6, .pb-lg-6 { padding-bottom: calc(var(--gutter) * 4); }
  .p-lg-7, .py-lg-7, .pb-lg-7 { padding-bottom: calc(var(--gutter) * 5); }

  /* ! - Spacing - Padding X (Left & Right) */
  .p-lg-0, .px-lg-0, .ps-lg-0 { padding-left: 0; }
  .p-lg-1, .px-lg-1, .ps-lg-1 { padding-left: var(--gutter); }
  .p-lg-2, .px-lg-2, .ps-lg-2 { padding-left: calc(var(--gutter) * 1.5); }
  .p-lg-3, .px-lg-3, .ps-lg-3 { padding-left: calc(var(--gutter) * 2); }
  .p-lg-4, .px-lg-4, .ps-lg-4 { padding-left: calc(var(--gutter) * 2.5); }
  .p-lg-5, .px-lg-5, .ps-lg-5 { padding-left: calc(var(--gutter) * 3); }
  .p-lg-6, .px-lg-6, .ps-lg-6 { padding-left: calc(var(--gutter) * 4); }
  .p-lg-7, .px-lg-7, .ps-lg-7 { padding-left: calc(var(--gutter) * 5); }

  .p-lg-0, .px-lg-0, .pe-lg-0 { padding-right: 0; }
  .p-lg-1, .px-lg-1, .pe-lg-1 { padding-right: var(--gutter); }
  .p-lg-2, .px-lg-2, .pe-lg-2 { padding-right: calc(var(--gutter) * 1.5); }
  .p-lg-3, .px-lg-3, .pe-lg-3 { padding-right: calc(var(--gutter) * 2); }
  .p-lg-4, .px-lg-4, .pe-lg-4 { padding-right: calc(var(--gutter) * 2.5); }
  .p-lg-5, .px-lg-5, .pe-lg-5 { padding-right: calc(var(--gutter) * 3); }
  .p-lg-6, .px-lg-6, .pe-lg-6 { padding-right: calc(var(--gutter) * 4); }
  .p-lg-7, .px-lg-7, .pe-lg-7 { padding-right: calc(var(--gutter) * 5); }

  /* ! - Spacing - Margin Y (Top & Bottom) */
  .m-lg-0, .my-lg-0, .mt-lg-0 { margin-top: 0; }
  .m-lg-1, .my-lg-1, .mt-lg-1 { margin-top: var(--gutter); }
  .m-lg-2, .my-lg-2, .mt-lg-2 { margin-top: calc(var(--gutter) * 1.5); }
  .m-lg-3, .my-lg-3, .mt-lg-3 { margin-top: calc(var(--gutter) * 2); }
  .m-lg-4, .my-lg-4, .mt-lg-4 { margin-top: calc(var(--gutter) * 2.5); }
  .m-lg-5, .my-lg-5, .mt-lg-5 { margin-top: calc(var(--gutter) * 3); }
  .m-lg-6, .my-lg-6, .mt-lg-6 { margin-top: calc(var(--gutter) * 4); }
  .m-lg-7, .my-lg-7, .mt-lg-7 { margin-top: calc(var(--gutter) * 5); }

  .m-lg-0, .my-lg-0, .mb-lg-0 { margin-bottom: 0; }
  .m-lg-1, .my-lg-1, .mb-lg-1 { margin-bottom: var(--gutter); }
  .m-lg-2, .my-lg-2, .mb-lg-2 { margin-bottom: calc(var(--gutter) * 1.5); }
  .m-lg-3, .my-lg-3, .mb-lg-3 { margin-bottom: calc(var(--gutter) * 2); }
  .m-lg-4, .my-lg-4, .mb-lg-4 { margin-bottom: calc(var(--gutter) * 2.5); }
  .m-lg-5, .my-lg-5, .mb-lg-5 { margin-bottom: calc(var(--gutter) * 3); }
  .m-lg-6, .my-lg-6, .mb-lg-6 { margin-bottom: calc(var(--gutter) * 4); }
  .m-lg-7, .my-lg-7, .mb-lg-7 { margin-bottom: calc(var(--gutter) * 5); }

  /* ! - Spacing - Margin X (Left & Right) */
  .m-lg-0, .mx-lg-0, .ms-lg-0 { margin-left: 0; }
  .m-lg-1, .mx-lg-1, .ms-lg-1 { margin-left: var(--gutter); }
  .m-lg-2, .mx-lg-2, .ms-lg-2 { margin-left: calc(var(--gutter) * 1.5); }
  .m-lg-3, .mx-lg-3, .ms-lg-3 { margin-left: calc(var(--gutter) * 2); }
  .m-lg-4, .mx-lg-4, .ms-lg-4 { margin-left: calc(var(--gutter) * 2.5); }
  .m-lg-5, .mx-lg-5, .ms-lg-5 { margin-left: calc(var(--gutter) * 3); }
  .m-lg-6, .mx-lg-6, .ms-lg-6 { margin-left: calc(var(--gutter) * 4); }
  .m-lg-7, .mx-lg-7, .ms-lg-7 { margin-left: calc(var(--gutter) * 5); }
  .mx-lg-auto { margin-left: auto; }

  .m-lg-0, .mx-lg-0, .me-lg-0 { margin-right: 0; }
  .m-lg-1, .mx-lg-1, .me-lg-1 { margin-right: var(--gutter); }
  .m-lg-2, .mx-lg-2, .me-lg-2 { margin-right: calc(var(--gutter) * 1.5); }
  .m-lg-3, .mx-lg-3, .me-lg-3 { margin-right: calc(var(--gutter) * 2); }
  .m-lg-4, .mx-lg-4, .me-lg-4 { margin-right: calc(var(--gutter) * 2.5); }
  .m-lg-5, .mx-lg-5, .me-lg-5 { margin-right: calc(var(--gutter) * 3); }
  .m-lg-6, .mx-lg-6, .me-lg-6 { margin-right: calc(var(--gutter) * 4); }
  .m-lg-7, .mx-lg-7, .me-lg-7 { margin-right: calc(var(--gutter) * 5); }
  .mx-lg-auto { margin-right: auto; }

  .m-lg-auto { margin: auto; }
}


/* ========================================
   XL - Extra Large devices (>= 1200px)
   NOT IMPLEMENTED - Available for future use
   ======================================== */

/* 
To implement XL breakpoint, add @media (min-width: 1200px) with:
- All column, display, text, flexbox utilities with -xl- prefix
- All height utilities (vh-xl-*, h-xl-*)
- All spacing utilities (p-xl-*, m-xl-* and directional variants)
Following the same structure as MD and LG breakpoints above
*/

@media (min-width: 1200px) {
    /* ! - CSS Grid Layout - Explicit columns responsive */
  .grid-cols-xl-1 { grid-template-columns: repeat(1, 1fr); }
  .grid-cols-xl-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-xl-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-cols-xl-4 { grid-template-columns: repeat(4, 1fr); }
  .grid-cols-xl-5 { grid-template-columns: repeat(5, 1fr); }
  .grid-cols-xl-6 { grid-template-columns: repeat(6, 1fr); }
}


/* ========================================
   XXL - Extra Extra Large devices (>= 1400px)
   NOT IMPLEMENTED - Available for future use
   ======================================== */

/* 
To implement XXL breakpoint, add @media (min-width: 1400px) with:
- All column, display, text, flexbox utilities with -xxl- prefix
- All height utilities (vh-xxl-*, h-xxl-*)
- All spacing utilities (p-xxl-*, m-xxl-* and directional variants)
Following the same structure as MD and LG breakpoints above
*/


/* ========================================
   JAVASCRIPT FOR MOBILE VH FIX
   ======================================== */

@media (hover: none) { 
  .vh-100,
  .vh-md-100,
  .vh-lg-100 {
    height: -webkit-fill-available;
  }
}


/*
Add this JavaScript to your WordPress theme to fix viewport height on mobile devices.
You can add it to your theme's main JavaScript file or enqueue it separately.

// Fix for mobile viewport height
function setVhVariable() {
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}

// Set on load and resize
setVhVariable();
window.addEventListener('resize', setVhVariable);
window.addEventListener('orientationchange', setVhVariable);

// Or in jQuery (if your theme uses it):
jQuery(document).ready(function($) {
  function setVhVariable() {
    let vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--vh', vh + 'px');
  }
  
  setVhVariable();
  $(window).on('resize orientationchange', setVhVariable);
});
*/


/* ========================================
   USAGE EXAMPLES
   ======================================== */

/*
<!-- Responsive columns -->
<div class="col-100 col-md-50 col-lg-33">
  100% on mobile, 50% on tablet, 33% on desktop
</div>

<!-- Flexbox responsive layout -->
<div class="d-flex flex-column flex-lg-row justify-content-between align-items-center">
  Vertical on mobile/tablet, horizontal on desktop
</div>

<!-- Responsive spacing with --gutter variable -->
<section class="py-3 py-md-5 py-lg-7 px-2 px-lg-4">
  Padding increases progressively on larger screens
</section>

<!-- Height utilities -->
<header class="vh-100 vh-md-60 d-flex align-items-center justify-content-center">
  Full height on mobile, 60vh on tablet+
</header>

<!-- Complex responsive card -->
<article class="col-100 col-md-50 col-lg-33 
               d-flex flex-column 
               p-3 p-lg-5 
               gap-2 gap-lg-4
               h-auto">
  <h2 class="text-center text-lg-start">Card Title</h2>
  <p class="mb-3">Card content...</p>
</article>

<!-- Centering with margin auto -->
<div class="col-100 col-md-80 col-lg-60 mx-auto py-5">
  Centered container with responsive width
</div>
*/


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

/* Background colors */
.bg-dark { background-color: var(--dark); }
.bg-light { background-color: var(--light); }
.bg-white { background-color: #fff; }
.bg-primary { background-color: var(--primary); }
.bg-primary-light { background-color: var(--primary-light); }
.bg-primary-lighter { background-color: var(--primary-lighter); }
.bg-primary-dark { background-color: var(--primary-dark); }
.bg-primary-darker { background-color: var(--primary-darker); }
.bg-secondary { background-color: var(--secondary); }
.bg-secondary-light { background-color: var(--secondary-light); }
.bg-secondary-lighter { background-color: var(--secondary-lighter); }
.bg-secondary-dark { background-color: var(--secondary-dark); }
.bg-secondary-darker { background-color: var(--secondary-darker); }
.bg-accent { background-color: var(--accent); }
.bg-transparent { background-color: transparent; }

.bg-light--blur {
  background-color: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* Text colors */
.text-white { color: #fff; }
.text-accent { color: var(--accent); }
.text-primary { color: var(--primary); }
.text-primary-light { color: var(--primary-light); }
.text-primary-lighter { color: var(--primary-lighter); }
.text-primary-dark { color: var(--primary-dark); }
.text-primary-darker { color: var(--primary-darker); }
.text-secondary { color: var(--secondary); }
.text-secondary-light { color: var(--secondary-light); }
.text-secondary-lighter { color: var(--secondary-lighter); }
.text-secondary-dark { color: var(--secondary-dark); }
.text-secondary-darker { color: var(--secondary-darker); }
.text-light { color: var(--light); }
.text-dark { color: var(--dark); }
.text-transparent { opacity: 0; }
.text-muted { opacity: 0.6; }

/* Text color links */
a.text-primary {
  color: var(--primary-darker);
}

a.text-primary:focus,
a.text-primary:active,
a.text-primary:hover {
  color: var(--primary);
}

a.text-secondary:focus,
a.text-secondary:hover,
a.text-secondary:hover {
  color: var(--secondary-lighter);
}

a.text-light:focus,
a.text-light:hover,
a.text-light:hover {
  color: #fff;
}


/* ========================================
   ! TYPOGRAPHY UTILITIES
   ======================================== */

.text-disabled {
  opacity: 0.5;
  cursor: default;
  font-weight: 300;
  font-style: oblique;
}

.text-uppercase { text-transform: uppercase; }
.text-small-caps { font-variant-caps: all-small-caps; }
.text-underline { text-decoration: underline; }

.lh-0 { line-height: 0; }
.lh-1 { line-height: 1; }
.lh-h { line-height: var(--headings-line-height); }
.lh-p { line-height: var(--body-line-height); }

.fw-normal { font-weight: normal; }
.fw-bold { font-weight: bold; }

@media (min-width: 768px) {
  .lh-md-0 { line-height: 0; }
  .lh-md-1 { line-height: 1; }
  .lh-md-h { line-height: var(--headings-line-height); }
  .lh-md-p { line-height: var(--body-line-height); }
}

@media (max-width: 767px) {
  .lh-sm-0 { line-height: 0; }
  .lh-sm-1 { line-height: 1; }
  .lh-sm-h { line-height: var(--headings-line-height); }
  .lh-sm-p { line-height: var(--body-line-height); }
}

.border-top {border-width: 0; border-top-width: 1px;}
.border-bottom {border-width: 0; border-bottom-width: 1px;}
.border-start {border-width: 0; border-left-width: 1px;}
.border-end {border-width: 0; border-right-width: 1px;}
.border {border-width: 1px;}
.border-top, .border-bottom, .border-start, .border-end, .border {border-style: solid; border-color: inherit;}

/* ========================================
   ! BUTTON VARIANTS
   ======================================== */

/* Color variants */
.button--primary {
  --btn-bg: var(--primary);
  --btn-color: var(--light);
}

.button--primary-darker {
  --btn-bg: var(--primary-darker);
  --btn-color: var(--light);
}

.button--primary-lighter {
  --btn-bg: var(--primary-lighter);
  --btn-color: var(--light);
}

.button--secondary {
  --btn-bg: var(--secondary);
  --btn-color: var(--light);
}

.button--secondary-darker {
  --btn-bg: var(--secondary-darker);
  --btn-color: var(--light);
}

.button--secondary-lighter {
  --btn-bg: var(--secondary-lighter);
  --btn-color: var(--light);
}

.button--light {
  --btn-bg: var(--light);
  --btn-color: var(--dark);
}

.button--dark {
  --btn-bg: var(--dark);
  --btn-color: var(--light);
}


/* ========================================
   ! MEDIA ELEMENTS
   ======================================== */

/* Responsive images */
img.img-res,
figure.img-res {
  width: 100%;
}

figure.img-res img {
  width: 100%;
  height: auto;
}

/* Image contain/cover */
img.img-contain,
figure.img-contain img,
img.img-cover,
figure.img-cover img {
  width: 100%;
  height: 100%;
}

img.img-contain,
figure.img-contain img {
  object-fit: contain;
}

img.img-cover,
figure.img-cover img {
  object-fit: cover;
}

/* Video container (16:9) */
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;
}

.video-container iframe,
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* ========================================
   SPACING VALUES REFERENCE
   ======================================== */

/*
Spacing scale (with --gutter: 1rem = 16px):
- 0: 0
- 1: 1rem (16px)
- 2: 1.5rem (24px)
- 3: 2rem (32px)
- 4: 2.5rem (40px)
- 5: 3rem (48px)
- 6: 4rem (64px)
- 7: 5rem (80px)
*/