/* =========================================================
   map-utilities.css (for Mediaapparat (=map)
   Variable-driven mini utilities for Elementor widgets
   Scope: wrap widget root with "map-u" to prevent leakage.
   Usage examples:
     <div class="map-u u-flex u-jc-between u-ai-center u-mt-4 md:u-mt-5 u-px-3">
     <div class="map-u sm:u-pl-3 lg:u-pl-5">
   Breakpoints (fixed values in CSS for broad support):
     sm = 576px, md = 768px, lg = 992px, xl = 1200px
   Spacing scale:
     0=0, 1=.25rem, 2=.5rem, 3=1rem, 4=1.5rem, 5=3rem
   NOTE: In HTML, write classes with a literal colon, e.g. md:u-mt-3
         In CSS they are escaped as .md\:u-mt-3 (done below for you).
   ========================================================= */


/* ---- Central spacing variables (override as needed) ---- */
.map-u {
  --u-space-0: 0;
  --u-space-1: .25rem;  /* 4px */
  --u-space-1-25: .3125rem; /* 5px */
  --u-space-2: .5rem;   /* 8px */
  --u-space-2-5: .75rem; /* 12px */
  --u-space-3: 1rem;    /* 16px */
  --u-space-3-5: 1.25rem; /* 20px */
  --u-space-4: 1.5rem;  /* 24px */
  --u-space-5: 2rem;    /* 32px */
  --u-space-5-25: 2.25rem; /* 36px */
  --u-space-6: 2.5rem;  /* 40px */
  --u-space-7: 3rem;    /* 48px */
  --u-space-7-5: 3.75rem; /* 60px */
  --u-space-8: 3.5rem;  /* 56px */
  --u-space-9: 4rem;    /* 64px */
  --u-space-10: 5rem;   /* 80px */
  --u-space-10-75: 6.75rem; /* 108px */
  --u-space-11: 8.375rem; /* 134px */
  --u-space-12: 6.25rem; /* 100px */
  --u-space-16: 8rem; /* 128px */
  --u-space-18: 10rem; /* 160px */
  --u-space-20: 15.25rem; /* 244px */

  /* --- Radius (linked to space tokens) --- */
  --u-radius-0: var(--u-space-0);
  --u-radius-1: var(--u-space-1);
  --u-radius-2: var(--u-space-2);
  --u-radius-2-5: var(--u-space-2-5);
  --u-radius-3: var(--u-space-3);
  --u-radius-4: var(--u-space-4);

  /* --- Special Radius Utilities --- */
  --u-radius-full: 9999px;
  --u-radius-circle: 50%;  
}

/* other basics */
.u-text-align-center { text-align: center; }

/* radius utility classes */
.map-u.u-rounded-0 { border-radius: var(--u-radius-0); }
.map-u.u-rounded-1 { border-radius: var(--u-radius-1); }
.map-u.u-rounded-2 { border-radius: var(--u-radius-2); }
.map-u.u-rounded-2-5 { border-radius: var(--u-radius-2-5); }
.map-u.u-rounded-3 { border-radius: var(--u-radius-3); }
.map-u.u-rounded-4 { border-radius: var(--u-radius-4); }
.map-u.u-rounded-full { border-radius: var(--u-radius-full); }
.map-u.u-rounded-circle { border-radius: var(--u-radius-circle); }

/* Responsive border-radius for lg breakpoint */
@media (min-width: 992px) {
  .map-u.u-lg-rounded-2 { border-radius: var(--u-radius-2); }
}

/* Base border style */
.map-u.u-border {
  border: 1px solid;
}

/* Border color utilities */
.map-u.u-border-Neutral-64 {
  border-color: var(--Neutral-64);
}
.map-u.u-border-Neutral-32 {
  border-color: var(--Neutral-32);
}


/* ---- Grid utilities ---- */
.map-u.u-grid { display: grid; }
.map-u.u-grid-af-col{ grid-auto-flow: column; }
.map-u.u-grid-a-col-fr { grid-auto-columns: minmax(0, 1fr); }


/* ---- Flex utilities ---- */
.map-u.u-flex        { display: flex; }
.map-u.u-inline-flex { display: inline-flex; }
.map-u.u-flex-row    { flex-direction: row; }
.map-u.u-flex-column { flex-direction: column; }
.map-u.u-flex-wrap   { flex-wrap: wrap; }
.map-u.u-flex-nowrap { flex-wrap: nowrap; }
.map-u.u-jc-start    { justify-content: flex-start; }
.map-u.u-jc-center   { justify-content: center; }
.map-u.u-jc-end      { justify-content: flex-end; }
.map-u.u-jc-between  { justify-content: space-between; }
.map-u.u-jc-around   { justify-content: space-around; }
.map-u.u-ai-start    { align-items: flex-start; }
.map-u.u-ai-center   { align-items: center; }
.map-u.u-ai-end      { align-items: flex-end; }
.map-u.u-ai-stretch  { align-items: stretch; }
.map-u.u-ai-baseline  { align-items: baseline; }



/*
 * ===============================================
 * Display Utilities
 * ===============================================
 */

/* --- Base (Mobile-First) --- */
/* .u-flex, .u-inline-flex, and .u-grid already exist */
.map-u.u-block { display: block; }
.map-u.u-inline-block { display: inline-block; }
.map-u.u-inline { display: inline; }
.map-u.u-hidden { display: none; }


/* --- Responsive: sm (576px) --- */
@media (min-width: 576px) {
  .map-u.u-sm-block { display: block; }
  .map-u.u-sm-inline-block { display: inline-block; }
  .map-u.u-sm-inline { display: inline; }
  .map-u.u-sm-flex { display: flex; }
  .map-u.u-sm-inline-flex { display: inline-flex; }
  .map-u.u-sm-grid { display: grid; }
  .map-u.u-sm-hidden { display: none; }

  .map-u.u-sm-ai-start   { align-items: flex-start; }
  .map-u.u-sm-ai-center  { align-items: center; }
  .map-u.u-sm-ai-end     { align-items: flex-end; }
  .map-u.u-sm-ai-stretch { align-items: stretch; }  
}

/* --- Responsive: md (768px) --- */
@media (min-width: 768px) {
  .map-u.u-md-block { display: block; }
  .map-u.u-md-inline-block { display: inline-block; }
  .map-u.u-md-inline { display: inline; }
  .map-u.u-md-flex { display: flex; }
  .map-u.u-md-inline-flex { display: inline-flex; }
  .map-u.u-md-grid { display: grid; }
  .map-u.u-md-hidden { display: none; }

  .map-u.u-md-ai-start   { align-items: flex-start; }
  .map-u.u-md-ai-center  { align-items: center; }
  .map-u.u-md-ai-end     { align-items: flex-end; }
  .map-u.u-md-ai-stretch { align-items: stretch; }  
}

/* --- Responsive: lg (992px) --- */
@media (min-width: 992px) {
  .map-u.u-lg-block { display: block; }
  .map-u.u-lg-inline-block { display: inline-block; }
  .map-u.u-lg-inline { display: inline; }
  .map-u.u-lg-flex { display: flex; }
  .map-u.u-lg-inline-flex { display: inline-flex; }
  .map-u.u-lg-grid { display: grid; }
  .map-u.u-lg-hidden { display: none; }

  .map-u.u-lg-ai-start   { align-items: flex-start; }
  .map-u.u-lg-ai-center  { align-items: center; }
  .map-u.u-lg-ai-end     { align-items: flex-end; }
  .map-u.u-lg-ai-stretch { align-items: stretch; }  

  /* Optional gap utilities (same scale) */
  .map-u.u-lg-gap-10 { gap: var(--u-space-10); }  
}

/* --- Responsive: xl (1200px) --- */
@media (min-width: 1200px) {
  .map-u.u-xl-block { display: block; }
  .map-u.u-xl-inline-block { display: inline-block; }
  .map-u.u-xl-inline { display: inline; }
  .map-u.u-xl-flex { display: flex; }
  .map-u.u-xl-inline-flex { display: inline-flex; }
  .map-u.u-xl-grid { display: grid; }
  .map-u.u-xl-hidden { display: none; }

  .map-u.u-xl-ai-start   { align-items: flex-start; }
  .map-u.u-xl-ai-center  { align-items: center; }
  .map-u.u-xl-ai-end     { align-items: flex-end; }
  .map-u.u-xl-ai-stretch { align-items: stretch; }  
}

/* Optional gap utilities (same scale) */
.map-u.u-gap-0 { gap: var(--u-space-0); }
.map-u.u-gap-1 { gap: var(--u-space-1); }
.map-u.u-gap-1-25 { gap: var(--u-space-1-25); }
.map-u.u-gap-2 { gap: var(--u-space-2); }
.map-u.u-gap-3 { gap: var(--u-space-3); }
.map-u.u-gap-3-5 { gap: var(--u-space-3-5); }
.map-u.u-gap-4 { gap: var(--u-space-4); }
.map-u.u-gap-5 { gap: var(--u-space-5); }
.map-u.u-gap-5-25 { gap: var(--u-space-5-25); }
.map-u.u-gap-6 { gap: var(--u-space-6); }
.map-u.u-gap-7 { gap: var(--u-space-7); }
.map-u.u-gap-7-5 { gap: var(--u-space-7-5); }
.map-u.u-gap-8 { gap: var(--u-space-8); }
.map-u.u-gap-10 { gap: var(--u-space-10); }
.map-u.u-gap-10-75 { gap: var(--u-space-10-75); }
.map-u.u-gap-11 { gap: var(--u-space-11); }
.map-u.u-gap-12 { gap: var(--u-space-12); }
.map-u.u-gap-16 { gap: var(--u-space-16); }
.map-u.u-gap-20 { gap: var(--u-space-20); }

/* ---- Spacing (base) ---- */

.map-u.u-m-0 { margin: var(--u-space-0); }
.map-u.u-m-1 { margin: var(--u-space-1); }
.map-u.u-m-2 { margin: var(--u-space-2); }
.map-u.u-m-3 { margin: var(--u-space-3); }
.map-u.u-m-4 { margin: var(--u-space-4); }
.map-u.u-m-5 { margin: var(--u-space-5); }
.map-u.u-mt-0 { margin-top: var(--u-space-0); }
.map-u.u-mt-1 { margin-top: var(--u-space-1); }
.map-u.u-mt-2 { margin-top: var(--u-space-2); }
.map-u.u-mt-3 { margin-top: var(--u-space-3); }
.map-u.u-mt-4 { margin-top: var(--u-space-4); }
.map-u.u-mt-5 { margin-top: var(--u-space-5); }
.map-u.u-mt-6 { margin-top: var(--u-space-6); }
.map-u.u-mt-7 { margin-top: var(--u-space-7); }
.map-u.u-mt-8 { margin-top: var(--u-space-8); }
.map-u.u-mt-9 { margin-top: var(--u-space-9); }
.map-u.u-mr-0 { margin-right: var(--u-space-0); }
.map-u.u-mr-1 { margin-right: var(--u-space-1); }
.map-u.u-mr-2 { margin-right: var(--u-space-2); }
.map-u.u-mr-3 { margin-right: var(--u-space-3); }
.map-u.u-mr-4 { margin-right: var(--u-space-4); }
.map-u.u-mr-5 { margin-right: var(--u-space-5); }
.map-u.u-mb-0 { margin-bottom: var(--u-space-0); }
.map-u.u-mb-1 { margin-bottom: var(--u-space-1); }
.map-u.u-mb-2 { margin-bottom: var(--u-space-2); }
.map-u.u-mb-2-5 { margin-bottom: var(--u-space-2-5); }
.map-u.u-mb-3 { margin-bottom: var(--u-space-3); }
.map-u.u-mb-3-5 { margin-bottom: var(--u-space-3-5); }
.map-u.u-mb-4 { margin-bottom: var(--u-space-4); }
.map-u.u-mb-5 { margin-bottom: var(--u-space-5); }
.map-u.u-mb-7 { margin-bottom: var(--u-space-7); }
.map-u.u-mb-10 { margin-bottom: var(--u-space-10); }
.map-u.u-mb-12 { margin-bottom: var(--u-space-12); }
.map-u.u-ml-0 { margin-left: var(--u-space-0); }
.map-u.u-ml-1 { margin-left: var(--u-space-1); }
.map-u.u-ml-2 { margin-left: var(--u-space-2); }
.map-u.u-ml-3 { margin-left: var(--u-space-3); }
.map-u.u-ml-4 { margin-left: var(--u-space-4); }
.map-u.u-ml-5 { margin-left: var(--u-space-5); }
.map-u.u-mx-0 { margin-left: var(--u-space-0); margin-right: var(--u-space-0); }
.map-u.u-my-0 { margin-top: var(--u-space-0); margin-bottom: var(--u-space-0); }
.map-u.u-mx-1 { margin-left: var(--u-space-1); margin-right: var(--u-space-1); }
.map-u.u-my-1 { margin-top: var(--u-space-1); margin-bottom: var(--u-space-1); }
.map-u.u-mx-2 { margin-left: var(--u-space-2); margin-right: var(--u-space-2); }
.map-u.u-my-2 { margin-top: var(--u-space-2); margin-bottom: var(--u-space-2); }
.map-u.u-mx-3 { margin-left: var(--u-space-3); margin-right: var(--u-space-3); }
.map-u.u-my-3 { margin-top: var(--u-space-3); margin-bottom: var(--u-space-3); }
.map-u.u-mx-4 { margin-left: var(--u-space-4); margin-right: var(--u-space-4); }
.map-u.u-my-4 { margin-top: var(--u-space-4); margin-bottom: var(--u-space-4); }
.map-u.u-mx-5 { margin-left: var(--u-space-5); margin-right: var(--u-space-5); }
.map-u.u-my-5 { margin-top: var(--u-space-5); margin-bottom: var(--u-space-5); }


.map-u.u-p-0 { padding: var(--u-space-0); }
.map-u.u-p-1 { padding: var(--u-space-1); }
.map-u.u-p-2 { padding: var(--u-space-2); }
.map-u.u-p-3 { padding: var(--u-space-3); }
.map-u.u-p-4 { padding: var(--u-space-4); }
.map-u.u-p-5 { padding: var(--u-space-5); }
.map-u.u-pt-0 { padding-top: var(--u-space-0); }
.map-u.u-pt-1 { padding-top: var(--u-space-1); }
.map-u.u-pt-2 { padding-top: var(--u-space-2); }
.map-u.u-pt-3 { padding-top: var(--u-space-3); }
.map-u.u-pt-4 { padding-top: var(--u-space-4); }
.map-u.u-pt-5 { padding-top: var(--u-space-5); }
.map-u.u-pt-7 { padding-top: var(--u-space-7); }
.map-u.u-pr-0 { padding-right: var(--u-space-0); }
.map-u.u-pr-1 { padding-right: var(--u-space-1); }
.map-u.u-pr-2 { padding-right: var(--u-space-2); }
.map-u.u-pr-3 { padding-right: var(--u-space-3); }
.map-u.u-pr-3-5 { padding-right: var(--u-space-3-5); }
.map-u.u-pr-4 { padding-right: var(--u-space-4); }
.map-u.u-pr-5 { padding-right: var(--u-space-5); }
.map-u.u-pb-0 { padding-bottom: var(--u-space-0); }
.map-u.u-pb-1 { padding-bottom: var(--u-space-1); }
.map-u.u-pb-2 { padding-bottom: var(--u-space-2); }
.map-u.u-pb-3 { padding-bottom: var(--u-space-3); }
.map-u.u-pb-3-5 { padding-bottom: var(--u-space-3-5); }
.map-u.u-pb-4 { padding-bottom: var(--u-space-4); }
.map-u.u-pb-5 { padding-bottom: var(--u-space-5); }
.map-u.u-pl-0 { padding-left: var(--u-space-0); }
.map-u.u-pl-1 { padding-left: var(--u-space-1); }
.map-u.u-pl-2 { padding-left: var(--u-space-2); }
.map-u.u-pl-3 { padding-left: var(--u-space-3); }
.map-u.u-pl-4 { padding-left: var(--u-space-4); }
.map-u.u-pl-5 { padding-left: var(--u-space-5); }
.map-u.u-pl-7 { padding-left: var(--u-space-7); }
.map-u.u-px-0 { padding-left: var(--u-space-0); padding-right: var(--u-space-0); }
.map-u.u-py-0 { padding-top: var(--u-space-0); padding-bottom: var(--u-space-0); }
.map-u.u-px-1 { padding-left: var(--u-space-1); padding-right: var(--u-space-1); }
.map-u.u-py-1 { padding-top: var(--u-space-1); padding-bottom: var(--u-space-1); }
.map-u.u-px-2 { padding-left: var(--u-space-2); padding-right: var(--u-space-2); }
.map-u.u-px-2-5 { padding-left: var(--u-space-2-5); padding-right: var(--u-space-2-5); }
.map-u.u-py-2 { padding-top: var(--u-space-2); padding-bottom: var(--u-space-2); }
.map-u.u-px-3 { padding-left: var(--u-space-3); padding-right: var(--u-space-3); }
.map-u.u-py-3 { padding-top: var(--u-space-3); padding-bottom: var(--u-space-3); }
.map-u.u-px-4 { padding-left: var(--u-space-4); padding-right: var(--u-space-4); }
.map-u.u-py-4 { padding-top: var(--u-space-4); padding-bottom: var(--u-space-4); }
.map-u.u-px-5 { padding-left: var(--u-space-5); padding-right: var(--u-space-5); }
.map-u.u-px-6 { padding-left: var(--u-space-6); padding-right: var(--u-space-6); }
.map-u.u-px-8 { padding-left: var(--u-space-8); padding-right: var(--u-space-8); }
.map-u.u-px-9 { padding-left: var(--u-space-9); padding-right: var(--u-space-9); }
.map-u.u-py-5 { padding-top: var(--u-space-5); padding-bottom: var(--u-space-5); }
.map-u.u-py-5-25 { padding-top: var(--u-space-5-25); padding-bottom: var(--u-space-5-25); }
.map-u.u-py-6 { padding-top: var(--u-space-6); padding-bottom: var(--u-space-6); }
.map-u.u-py-7 { padding-top: var(--u-space-7); padding-bottom: var(--u-space-7); }
.map-u.u-py-9 { padding-top: var(--u-space-9); padding-bottom: var(--u-space-9); }
.map-u.u-py-12 { padding-top: var(--u-space-12); padding-bottom: var(--u-space-12); }
.map-u.u-py-18 { padding-top: var(--u-space-18); padding-bottom: var(--u-space-18); }
.map-u.u-py-20 { padding-top: var(--u-space-20); padding-bottom: var(--u-space-20); }


/* ---- Responsive: sm ---- */

@media (min-width: 576px) {
  .map-u.u-sm-m-0 { margin: var(--u-space-0); }
  .map-u.u-sm-m-1 { margin: var(--u-space-1); }
  .map-u.u-sm-m-2 { margin: var(--u-space-2); }
  .map-u.u-sm-m-3 { margin: var(--u-space-3); }
  .map-u.u-sm-m-4 { margin: var(--u-space-4); }
  .map-u.u-sm-m-5 { margin: var(--u-space-5); }
  .map-u.u-sm-mt-0 { margin-top: var(--u-space-0); }
  .map-u.u-sm-mt-1 { margin-top: var(--u-space-1); }
  .map-u.u-sm-mt-2 { margin-top: var(--u-space-2); }
  .map-u.u-sm-mt-3 { margin-top: var(--u-space-3); }
  .map-u.u-sm-mt-4 { margin-top: var(--u-space-4); }
  .map-u.u-sm-mt-5 { margin-top: var(--u-space-5); }
  .map-u.u-sm-mr-0 { margin-right: var(--u-space-0); }
  .map-u.u-sm-mr-1 { margin-right: var(--u-space-1); }
  .map-u.u-sm-mr-2 { margin-right: var(--u-space-2); }
  .map-u.u-sm-mr-3 { margin-right: var(--u-space-3); }
  .map-u.u-sm-mr-4 { margin-right: var(--u-space-4); }
  .map-u.u-sm-mr-5 { margin-right: var(--u-space-5); }
  .map-u.u-sm-mb-0 { margin-bottom: var(--u-space-0); }
  .map-u.u-sm-mb-1 { margin-bottom: var(--u-space-1); }
  .map-u.u-sm-mb-2 { margin-bottom: var(--u-space-2); }
  .map-u.u-sm-mb-3 { margin-bottom: var(--u-space-3); }
  .map-u.u-sm-mb-4 { margin-bottom: var(--u-space-4); }
  .map-u.u-sm-mb-5 { margin-bottom: var(--u-space-5); }
  .map-u.u-sm-mb-10 { margin-bottom: var(--u-space-10); }
  .map-u.u-sm-ml-0 { margin-left: var(--u-space-0); }
  .map-u.u-sm-ml-1 { margin-left: var(--u-space-1); }
  .map-u.u-sm-ml-2 { margin-left: var(--u-space-2); }
  .map-u.u-sm-ml-3 { margin-left: var(--u-space-3); }
  .map-u.u-sm-ml-4 { margin-left: var(--u-space-4); }
  .map-u.u-sm-ml-5 { margin-left: var(--u-space-5); }
  .map-u.u-sm-mx-0 { margin-left: var(--u-space-0); margin-right: var(--u-space-0); }
  .map-u.u-sm-my-0 { margin-top: var(--u-space-0); margin-bottom: var(--u-space-0); }
  .map-u.u-sm-mx-1 { margin-left: var(--u-space-1); margin-right: var(--u-space-1); }
  .map-u.u-sm-my-1 { margin-top: var(--u-space-1); margin-bottom: var(--u-space-1); }
  .map-u.u-sm-mx-2 { margin-left: var(--u-space-2); margin-right: var(--u-space-2); }
  .map-u.u-sm-my-2 { margin-top: var(--u-space-2); margin-bottom: var(--u-space-2); }
  .map-u.u-sm-mx-3 { margin-left: var(--u-space-3); margin-right: var(--u-space-3); }
  .map-u.u-sm-my-3 { margin-top: var(--u-space-3); margin-bottom: var(--u-space-3); }
  .map-u.u-sm-mx-4 { margin-left: var(--u-space-4); margin-right: var(--u-space-4); }
  .map-u.u-sm-my-4 { margin-top: var(--u-space-4); margin-bottom: var(--u-space-4); }
  .map-u.u-sm-mx-5 { margin-left: var(--u-space-5); margin-right: var(--u-space-5); }
  .map-u.u-sm-my-5 { margin-top: var(--u-space-5); margin-bottom: var(--u-space-5); }
}


@media (min-width: 576px) {
  .map-u.u-sm-p-0 { padding: var(--u-space-0); }
  .map-u.u-sm-p-1 { padding: var(--u-space-1); }
  .map-u.u-sm-p-2 { padding: var(--u-space-2); }
  .map-u.u-sm-p-3 { padding: var(--u-space-3); }
  .map-u.u-sm-p-4 { padding: var(--u-space-4); }
  .map-u.u-sm-p-5 { padding: var(--u-space-5); }
  .map-u.u-sm-pt-0 { padding-top: var(--u-space-0); }
  .map-u.u-sm-pt-1 { padding-top: var(--u-space-1); }
  .map-u.u-sm-pt-2 { padding-top: var(--u-space-2); }
  .map-u.u-sm-pt-3 { padding-top: var(--u-space-3); }
  .map-u.u-sm-pt-4 { padding-top: var(--u-space-4); }
  .map-u.u-sm-pt-5 { padding-top: var(--u-space-5); }
  .map-u.u-sm-pr-0 { padding-right: var(--u-space-0); }
  .map-u.u-sm-pr-1 { padding-right: var(--u-space-1); }
  .map-u.u-sm-pr-2 { padding-right: var(--u-space-2); }
  .map-u.u-sm-pr-3 { padding-right: var(--u-space-3); }
  .map-u.u-sm-pr-4 { padding-right: var(--u-space-4); }
  .map-u.u-sm-pr-5 { padding-right: var(--u-space-5); }
  .map-u.u-sm-pb-0 { padding-bottom: var(--u-space-0); }
  .map-u.u-sm-pb-1 { padding-bottom: var(--u-space-1); }
  .map-u.u-sm-pb-2 { padding-bottom: var(--u-space-2); }
  .map-u.u-sm-pb-3 { padding-bottom: var(--u-space-3); }
  .map-u.u-sm-pb-4 { padding-bottom: var(--u-space-4); }
  .map-u.u-sm-pb-5 { padding-bottom: var(--u-space-5); }
  .map-u.u-sm-pl-0 { padding-left: var(--u-space-0); }
  .map-u.u-sm-pl-1 { padding-left: var(--u-space-1); }
  .map-u.u-sm-pl-2 { padding-left: var(--u-space-2); }
  .map-u.u-sm-pl-3 { padding-left: var(--u-space-3); }
  .map-u.u-sm-pl-4 { padding-left: var(--u-space-4); }
  .map-u.u-sm-pl-5 { padding-left: var(--u-space-5); }
  .map-u.u-sm-px-0 { padding-left: var(--u-space-0); padding-right: var(--u-space-0); }
  .map-u.u-sm-py-0 { padding-top: var(--u-space-0); padding-bottom: var(--u-space-0); }
  .map-u.u-sm-px-1 { padding-left: var(--u-space-1); padding-right: var(--u-space-1); }
  .map-u.u-sm-py-1 { padding-top: var(--u-space-1); padding-bottom: var(--u-space-1); }
  .map-u.u-sm-px-2 { padding-left: var(--u-space-2); padding-right: var(--u-space-2); }
  .map-u.u-sm-py-2 { padding-top: var(--u-space-2); padding-bottom: var(--u-space-2); }
  .map-u.u-sm-px-3 { padding-left: var(--u-space-3); padding-right: var(--u-space-3); }
  .map-u.u-sm-py-3 { padding-top: var(--u-space-3); padding-bottom: var(--u-space-3); }
  .map-u.u-sm-px-4 { padding-left: var(--u-space-4); padding-right: var(--u-space-4); }
  .map-u.u-sm-py-4 { padding-top: var(--u-space-4); padding-bottom: var(--u-space-4); }
  .map-u.u-sm-px-5 { padding-left: var(--u-space-5); padding-right: var(--u-space-5); }
  .map-u.u-sm-py-5 { padding-top: var(--u-space-5); padding-bottom: var(--u-space-5); }
}

/* ---- Responsive: md ---- */

@media (min-width: 768px) {
  /* Flex direction utilities for medium screens */
  .map-u.u-md-flex-row { flex-direction: row; }
  .map-u.u-md-flex-column { flex-direction: column; }

  /* Flex grow utilities for medium screens */
  .map-u.u-md-flex-1 { flex: 1; }
  .map-u.u-md-flex-1-3 { flex: 0 0 calc(33.333% - 1rem); }
  .map-u.u-md-flex-2-3 { flex: 0 0 calc(66.666% - 1rem); }

  /* Gap utilities for medium screens */
  .map-u.u-md-gap-5 { gap: var(--u-space-5); }
  .map-u.u-md-gap-12 { gap: var(--u-space-12); }
  .map-u.u-md-gap-16 { gap: var(--u-space-16); }

  .map-u.u-md-m-0 { margin: var(--u-space-0); }
  .map-u.u-md-m-1 { margin: var(--u-space-1); }
  .map-u.u-md-m-2 { margin: var(--u-space-2); }
  .map-u.u-md-m-3 { margin: var(--u-space-3); }
  .map-u.u-md-m-4 { margin: var(--u-space-4); }
  .map-u.u-md-m-5 { margin: var(--u-space-5); }
  .map-u.u-md-mt-0 { margin-top: var(--u-space-0); }
  .map-u.u-md-mt-1 { margin-top: var(--u-space-1); }
  .map-u.u-md-mt-2 { margin-top: var(--u-space-2); }
  .map-u.u-md-mt-3 { margin-top: var(--u-space-3); }
  .map-u.u-md-mt-4 { margin-top: var(--u-space-4); }
  .map-u.u-md-mt-5 { margin-top: var(--u-space-5); }
  .map-u.u-md-mr-0 { margin-right: var(--u-space-0); }
  .map-u.u-md-mr-1 { margin-right: var(--u-space-1); }
  .map-u.u-md-mr-2 { margin-right: var(--u-space-2); }
  .map-u.u-md-mr-3 { margin-right: var(--u-space-3); }
  .map-u.u-md-mr-4 { margin-right: var(--u-space-4); }
  .map-u.u-md-mr-5 { margin-right: var(--u-space-5); }
  .map-u.u-md-mb-0 { margin-bottom: var(--u-space-0); }
  .map-u.u-md-mb-1 { margin-bottom: var(--u-space-1); }
  .map-u.u-md-mb-2 { margin-bottom: var(--u-space-2); }
  .map-u.u-md-mb-3 { margin-bottom: var(--u-space-3); }
  .map-u.u-md-mb-4 { margin-bottom: var(--u-space-4); }
  .map-u.u-md-mb-5 { margin-bottom: var(--u-space-5); }
  .map-u.u-md-ml-0 { margin-left: var(--u-space-0); }
  .map-u.u-md-ml-1 { margin-left: var(--u-space-1); }
  .map-u.u-md-ml-2 { margin-left: var(--u-space-2); }
  .map-u.u-md-ml-3 { margin-left: var(--u-space-3); }
  .map-u.u-md-ml-4 { margin-left: var(--u-space-4); }
  .map-u.u-md-ml-5 { margin-left: var(--u-space-5); }
  .map-u.u-md-mx-0 { margin-left: var(--u-space-0); margin-right: var(--u-space-0); }
  .map-u.u-md-my-0 { margin-top: var(--u-space-0); margin-bottom: var(--u-space-0); }
  .map-u.u-md-mx-1 { margin-left: var(--u-space-1); margin-right: var(--u-space-1); }
  .map-u.u-md-my-1 { margin-top: var(--u-space-1); margin-bottom: var(--u-space-1); }
  .map-u.u-md-mx-2 { margin-left: var(--u-space-2); margin-right: var(--u-space-2); }
  .map-u.u-md-my-2 { margin-top: var(--u-space-2); margin-bottom: var(--u-space-2); }
  .map-u.u-md-mx-3 { margin-left: var(--u-space-3); margin-right: var(--u-space-3); }
  .map-u.u-md-my-3 { margin-top: var(--u-space-3); margin-bottom: var(--u-space-3); }
  .map-u.u-md-mx-4 { margin-left: var(--u-space-4); margin-right: var(--u-space-4); }
  .map-u.u-md-my-4 { margin-top: var(--u-space-4); margin-bottom: var(--u-space-4); }
  .map-u.u-md-mx-5 { margin-left: var(--u-space-5); margin-right: var(--u-space-5); }
  .map-u.u-md-my-5 { margin-top: var(--u-space-5); margin-bottom: var(--u-space-5); }
}


@media (min-width: 768px) {
  .map-u.u-md-p-0 { padding: var(--u-space-0); }
  .map-u.u-md-p-1 { padding: var(--u-space-1); }
  .map-u.u-md-p-2 { padding: var(--u-space-2); }
  .map-u.u-md-p-3 { padding: var(--u-space-3); }
  .map-u.u-md-p-4 { padding: var(--u-space-4); }
  .map-u.u-md-p-5 { padding: var(--u-space-5); }
  .map-u.u-md-pt-0 { padding-top: var(--u-space-0); }
  .map-u.u-md-pt-1 { padding-top: var(--u-space-1); }
  .map-u.u-md-pt-2 { padding-top: var(--u-space-2); }
  .map-u.u-md-pt-3 { padding-top: var(--u-space-3); }
  .map-u.u-md-pt-4 { padding-top: var(--u-space-4); }
  .map-u.u-md-pt-5 { padding-top: var(--u-space-5); }
  .map-u.u-md-pr-0 { padding-right: var(--u-space-0); }
  .map-u.u-md-pr-1 { padding-right: var(--u-space-1); }
  .map-u.u-md-pr-2 { padding-right: var(--u-space-2); }
  .map-u.u-md-pr-3 { padding-right: var(--u-space-3); }
  .map-u.u-md-pr-4 { padding-right: var(--u-space-4); }
  .map-u.u-md-pr-5 { padding-right: var(--u-space-5); }
  .map-u.u-md-pb-0 { padding-bottom: var(--u-space-0); }
  .map-u.u-md-pb-1 { padding-bottom: var(--u-space-1); }
  .map-u.u-md-pb-2 { padding-bottom: var(--u-space-2); }
  .map-u.u-md-pb-3 { padding-bottom: var(--u-space-3); }
  .map-u.u-md-pb-4 { padding-bottom: var(--u-space-4); }
  .map-u.u-md-pb-5 { padding-bottom: var(--u-space-5); }
  .map-u.u-md-pl-0 { padding-left: var(--u-space-0); }
  .map-u.u-md-pl-1 { padding-left: var(--u-space-1); }
  .map-u.u-md-pl-2 { padding-left: var(--u-space-2); }
  .map-u.u-md-pl-3 { padding-left: var(--u-space-3); }
  .map-u.u-md-pl-4 { padding-left: var(--u-space-4); }
  .map-u.u-md-pl-5 { padding-left: var(--u-space-5); }
  .map-u.u-md-px-0 { padding-left: var(--u-space-0); padding-right: var(--u-space-0); }
  .map-u.u-md-py-0 { padding-top: var(--u-space-0); padding-bottom: var(--u-space-0); }
  .map-u.u-md-px-1 { padding-left: var(--u-space-1); padding-right: var(--u-space-1); }
  .map-u.u-md-py-1 { padding-top: var(--u-space-1); padding-bottom: var(--u-space-1); }
  .map-u.u-md-px-2 { padding-left: var(--u-space-2); padding-right: var(--u-space-2); }
  .map-u.u-md-py-2 { padding-top: var(--u-space-2); padding-bottom: var(--u-space-2); }
  .map-u.u-md-px-3 { padding-left: var(--u-space-3); padding-right: var(--u-space-3); }
  .map-u.u-md-py-3 { padding-top: var(--u-space-3); padding-bottom: var(--u-space-3); }
  .map-u.u-md-px-4 { padding-left: var(--u-space-4); padding-right: var(--u-space-4); }
  .map-u.u-md-py-4 { padding-top: var(--u-space-4); padding-bottom: var(--u-space-4); }
  .map-u.u-md-px-5 { padding-left: var(--u-space-5); padding-right: var(--u-space-5); }
  .map-u.u-md-py-5 { padding-top: var(--u-space-5); padding-bottom: var(--u-space-5); }
}

/* ---- Responsive: lg ---- */
@media (min-width: 992px) {
  /* Flex direction utilities for large screens */
  .map-u.u-lg-flex-row { flex-direction: row; }
  .map-u.u-lg-flex-column { flex-direction: column; }
}

@media (min-width: 992px) {
  .map-u.u-lg-gap-3 { gap: var(--u-space-3); }
  .map-u.u-lg-gap-10 { gap: var(--u-space-10); }  
  .map-u.u-lg-gap-11 { gap: var(--u-space-11); }
  .map-u.u-lg-gap-20 { gap: var(--u-space-20); }
}



@media (min-width: 992px) {
  .map-u.u-lg-m-0 { margin: var(--u-space-0); }
  .map-u.u-lg-m-1 { margin: var(--u-space-1); }
  .map-u.u-lg-m-2 { margin: var(--u-space-2); }
  .map-u.u-lg-m-3 { margin: var(--u-space-3); }
  .map-u.u-lg-m-4 { margin: var(--u-space-4); }
  .map-u.u-lg-m-5 { margin: var(--u-space-5); }
  .map-u.u-lg-mt-0 { margin-top: var(--u-space-0); }
  .map-u.u-lg-mt-1 { margin-top: var(--u-space-1); }
  .map-u.u-lg-mt-2 { margin-top: var(--u-space-2); }
  .map-u.u-lg-mt-3 { margin-top: var(--u-space-3); }
  .map-u.u-lg-mt-4 { margin-top: var(--u-space-4); }
  .map-u.u-lg-mt-5 { margin-top: var(--u-space-5); }
  .map-u.u-lg-mt-6 { margin-top: var(--u-space-6); }
  .map-u.u-lg-mt-7 { margin-top: var(--u-space-7); }
  .map-u.u-lg-mr-0 { margin-right: var(--u-space-0); }
  .map-u.u-lg-mr-1 { margin-right: var(--u-space-1); }
  .map-u.u-lg-mr-2 { margin-right: var(--u-space-2); }
  .map-u.u-lg-mr-3 { margin-right: var(--u-space-3); }
  .map-u.u-lg-mr-4 { margin-right: var(--u-space-4); }
  .map-u.u-lg-mr-5 { margin-right: var(--u-space-5); }
  .map-u.u-lg-mb-0 { margin-bottom: var(--u-space-0); }
  .map-u.u-lg-mb-1 { margin-bottom: var(--u-space-1); }
  .map-u.u-lg-mb-2 { margin-bottom: var(--u-space-2); }
  .map-u.u-lg-mb-3 { margin-bottom: var(--u-space-3); }
  .map-u.u-lg-mb-4 { margin-bottom: var(--u-space-4); }
  .map-u.u-lg-mb-5 { margin-bottom: var(--u-space-5); }
  .map-u.u-lg-mb-10 { margin-bottom: var(--u-space-10); }
  .map-u.u-lg-mb-12 { margin-bottom: var(--u-space-12); }
  .map-u.u-lg-ml-0 { margin-left: var(--u-space-0); }
  .map-u.u-lg-ml-1 { margin-left: var(--u-space-1); }
  .map-u.u-lg-ml-2 { margin-left: var(--u-space-2); }
  .map-u.u-lg-ml-3 { margin-left: var(--u-space-3); }
  .map-u.u-lg-ml-4 { margin-left: var(--u-space-4); }
  .map-u.u-lg-ml-5 { margin-left: var(--u-space-5); }
  .map-u.u-lg-mx-0 { margin-left: var(--u-space-0); margin-right: var(--u-space-0); }
  .map-u.u-lg-my-0 { margin-top: var(--u-space-0); margin-bottom: var(--u-space-0); }
  .map-u.u-lg-mx-1 { margin-left: var(--u-space-1); margin-right: var(--u-space-1); }
  .map-u.u-lg-my-1 { margin-top: var(--u-space-1); margin-bottom: var(--u-space-1); }
  .map-u.u-lg-mx-2 { margin-left: var(--u-space-2); margin-right: var(--u-space-2); }
  .map-u.u-lg-my-2 { margin-top: var(--u-space-2); margin-bottom: var(--u-space-2); }
  .map-u.u-lg-mx-3 { margin-left: var(--u-space-3); margin-right: var(--u-space-3); }
  .map-u.u-lg-my-3 { margin-top: var(--u-space-3); margin-bottom: var(--u-space-3); }
  .map-u.u-lg-mx-4 { margin-left: var(--u-space-4); margin-right: var(--u-space-4); }
  .map-u.u-lg-my-4 { margin-top: var(--u-space-4); margin-bottom: var(--u-space-4); }
  .map-u.u-lg-mx-5 { margin-left: var(--u-space-5); margin-right: var(--u-space-5); }
  .map-u.u-lg-my-5 { margin-top: var(--u-space-5); margin-bottom: var(--u-space-5); }
}


@media (min-width: 992px) {
  .map-u.u-lg-p-0 { padding: var(--u-space-0); }
  .map-u.u-lg-p-1 { padding: var(--u-space-1); }
  .map-u.u-lg-p-2 { padding: var(--u-space-2); }
  .map-u.u-lg-p-3 { padding: var(--u-space-3); }
  .map-u.u-lg-p-4 { padding: var(--u-space-4); }
  .map-u.u-lg-p-5 { padding: var(--u-space-5); }
  .map-u.u-lg-p-9 { padding: var(--u-space-9); }
  .map-u.u-lg-pt-0 { padding-top: var(--u-space-0); }
  .map-u.u-lg-pt-1 { padding-top: var(--u-space-1); }
  .map-u.u-lg-pt-2 { padding-top: var(--u-space-2); }
  .map-u.u-lg-pt-3 { padding-top: var(--u-space-3); }
  .map-u.u-lg-pt-4 { padding-top: var(--u-space-4); }
  .map-u.u-lg-pt-5 { padding-top: var(--u-space-5); }
  .map-u.u-lg-pt-7 { padding-top: var(--u-space-7); }
  .map-u.u-lg-pr-0 { padding-right: var(--u-space-0); }
  .map-u.u-lg-pr-1 { padding-right: var(--u-space-1); }
  .map-u.u-lg-pr-2 { padding-right: var(--u-space-2); }
  .map-u.u-lg-pr-3 { padding-right: var(--u-space-3); }
  .map-u.u-lg-pr-4 { padding-right: var(--u-space-4); }
  .map-u.u-lg-pr-5 { padding-right: var(--u-space-5); }
  .map-u.u-lg-pb-0 { padding-bottom: var(--u-space-0); }
  .map-u.u-lg-pb-1 { padding-bottom: var(--u-space-1); }
  .map-u.u-lg-pb-2 { padding-bottom: var(--u-space-2); }
  .map-u.u-lg-pb-3 { padding-bottom: var(--u-space-3); }
  .map-u.u-lg-pb-4 { padding-bottom: var(--u-space-4); }
  .map-u.u-lg-pb-5 { padding-bottom: var(--u-space-5); }
  .map-u.u-lg-pl-0 { padding-left: var(--u-space-0); }
  .map-u.u-lg-pl-1 { padding-left: var(--u-space-1); }
  .map-u.u-lg-pl-2 { padding-left: var(--u-space-2); }
  .map-u.u-lg-pl-3 { padding-left: var(--u-space-3); }
  .map-u.u-lg-pl-4 { padding-left: var(--u-space-4); }
  .map-u.u-lg-pl-5 { padding-left: var(--u-space-5); }
  .map-u.u-lg-px-0 { padding-left: var(--u-space-0); padding-right: var(--u-space-0); }
  .map-u.u-lg-py-0 { padding-top: var(--u-space-0); padding-bottom: var(--u-space-0); }
  .map-u.u-lg-px-1 { padding-left: var(--u-space-1); padding-right: var(--u-space-1); }
  .map-u.u-lg-py-1 { padding-top: var(--u-space-1); padding-bottom: var(--u-space-1); }
  .map-u.u-lg-px-2 { padding-left: var(--u-space-2); padding-right: var(--u-space-2); }
  .map-u.u-lg-py-2 { padding-top: var(--u-space-2); padding-bottom: var(--u-space-2); }
  .map-u.u-lg-px-3 { padding-left: var(--u-space-3); padding-right: var(--u-space-3); }
  .map-u.u-lg-py-3 { padding-top: var(--u-space-3); padding-bottom: var(--u-space-3); }
  .map-u.u-lg-px-4 { padding-left: var(--u-space-4); padding-right: var(--u-space-4); }
  .map-u.u-lg-py-4 { padding-top: var(--u-space-4); padding-bottom: var(--u-space-4); }
  .map-u.u-lg-px-5 { padding-left: var(--u-space-5); padding-right: var(--u-space-5); }
  .map-u.u-lg-px-7 { padding-left: var(--u-space-7); padding-right: var(--u-space-7); }
  .map-u.u-lg-px-9 { padding-left: var(--u-space-9); padding-right: var(--u-space-9); }
  .map-u.u-lg-py-5 { padding-top: var(--u-space-5); padding-bottom: var(--u-space-5); }
  .map-u.u-lg-py-12 { padding-top: var(--u-space-12); padding-bottom: var(--u-space-12); }
  .map-u.u-lg-py-18 { padding-top: var(--u-space-18); padding-bottom: var(--u-space-18); }
}

/* ---- Responsive: xl ---- */

@media (min-width: 1200px) {
  .map-u.u-xl-m-0 { margin: var(--u-space-0); }
  .map-u.u-xl-m-1 { margin: var(--u-space-1); }
  .map-u.u-xl-m-2 { margin: var(--u-space-2); }
  .map-u.u-xl-m-3 { margin: var(--u-space-3); }
  .map-u.u-xl-m-4 { margin: var(--u-space-4); }
  .map-u.u-xl-m-5 { margin: var(--u-space-5); }
  .map-u.u-xl-mt-0 { margin-top: var(--u-space-0); }
  .map-u.u-xl-mt-1 { margin-top: var(--u-space-1); }
  .map-u.u-xl-mt-2 { margin-top: var(--u-space-2); }
  .map-u.u-xl-mt-3 { margin-top: var(--u-space-3); }
  .map-u.u-xl-mt-4 { margin-top: var(--u-space-4); }
  .map-u.u-xl-mt-5 { margin-top: var(--u-space-5); }
  .map-u.u-xl-mr-0 { margin-right: var(--u-space-0); }
  .map-u.u-xl-mr-1 { margin-right: var(--u-space-1); }
  .map-u.u-xl-mr-2 { margin-right: var(--u-space-2); }
  .map-u.u-xl-mr-3 { margin-right: var(--u-space-3); }
  .map-u.u-xl-mr-4 { margin-right: var(--u-space-4); }
  .map-u.u-xl-mr-5 { margin-right: var(--u-space-5); }
  .map-u.u-xl-mb-0 { margin-bottom: var(--u-space-0); }
  .map-u.u-xl-mb-1 { margin-bottom: var(--u-space-1); }
  .map-u.u-xl-mb-2 { margin-bottom: var(--u-space-2); }
  .map-u.u-xl-mb-3 { margin-bottom: var(--u-space-3); }
  .map-u.u-xl-mb-4 { margin-bottom: var(--u-space-4); }
  .map-u.u-xl-mb-5 { margin-bottom: var(--u-space-5); }
  .map-u.u-xl-ml-0 { margin-left: var(--u-space-0); }
  .map-u.u-xl-ml-1 { margin-left: var(--u-space-1); }
  .map-u.u-xl-ml-2 { margin-left: var(--u-space-2); }
  .map-u.u-xl-ml-3 { margin-left: var(--u-space-3); }
  .map-u.u-xl-ml-4 { margin-left: var(--u-space-4); }
  .map-u.u-xl-ml-5 { margin-left: var(--u-space-5); }
  .map-u.u-xl-mx-0 { margin-left: var(--u-space-0); margin-right: var(--u-space-0); }
  .map-u.u-xl-my-0 { margin-top: var(--u-space-0); margin-bottom: var(--u-space-0); }
  .map-u.u-xl-mx-1 { margin-left: var(--u-space-1); margin-right: var(--u-space-1); }
  .map-u.u-xl-my-1 { margin-top: var(--u-space-1); margin-bottom: var(--u-space-1); }
  .map-u.u-xl-mx-2 { margin-left: var(--u-space-2); margin-right: var(--u-space-2); }
  .map-u.u-xl-my-2 { margin-top: var(--u-space-2); margin-bottom: var(--u-space-2); }
  .map-u.u-xl-mx-3 { margin-left: var(--u-space-3); margin-right: var(--u-space-3); }
  .map-u.u-xl-my-3 { margin-top: var(--u-space-3); margin-bottom: var(--u-space-3); }
  .map-u.u-xl-mx-4 { margin-left: var(--u-space-4); margin-right: var(--u-space-4); }
  .map-u.u-xl-my-4 { margin-top: var(--u-space-4); margin-bottom: var(--u-space-4); }
  .map-u.u-xl-mx-5 { margin-left: var(--u-space-5); margin-right: var(--u-space-5); }
  .map-u.u-xl-my-5 { margin-top: var(--u-space-5); margin-bottom: var(--u-space-5); }
}


@media (min-width: 1200px) {
  .map-u.u-xl-p-0 { padding: var(--u-space-0); }
  .map-u.u-xl-p-1 { padding: var(--u-space-1); }
  .map-u.u-xl-p-2 { padding: var(--u-space-2); }
  .map-u.u-xl-p-3 { padding: var(--u-space-3); }
  .map-u.u-xl-p-4 { padding: var(--u-space-4); }
  .map-u.u-xl-p-5 { padding: var(--u-space-5); }
  .map-u.u-xl-pt-0 { padding-top: var(--u-space-0); }
  .map-u.u-xl-pt-1 { padding-top: var(--u-space-1); }
  .map-u.u-xl-pt-2 { padding-top: var(--u-space-2); }
  .map-u.u-xl-pt-3 { padding-top: var(--u-space-3); }
  .map-u.u-xl-pt-4 { padding-top: var(--u-space-4); }
  .map-u.u-xl-pt-5 { padding-top: var(--u-space-5); }
  .map-u.u-xl-pr-0 { padding-right: var(--u-space-0); }
  .map-u.u-xl-pr-1 { padding-right: var(--u-space-1); }
  .map-u.u-xl-pr-2 { padding-right: var(--u-space-2); }
  .map-u.u-xl-pr-3 { padding-right: var(--u-space-3); }
  .map-u.u-xl-pr-4 { padding-right: var(--u-space-4); }
  .map-u.u-xl-pr-5 { padding-right: var(--u-space-5); }
  .map-u.u-xl-pb-0 { padding-bottom: var(--u-space-0); }
  .map-u.u-xl-pb-1 { padding-bottom: var(--u-space-1); }
  .map-u.u-xl-pb-2 { padding-bottom: var(--u-space-2); }
  .map-u.u-xl-pb-3 { padding-bottom: var(--u-space-3); }
  .map-u.u-xl-pb-4 { padding-bottom: var(--u-space-4); }
  .map-u.u-xl-pb-5 { padding-bottom: var(--u-space-5); }
  .map-u.u-xl-pl-0 { padding-left: var(--u-space-0); }
  .map-u.u-xl-pl-1 { padding-left: var(--u-space-1); }
  .map-u.u-xl-pl-2 { padding-left: var(--u-space-2); }
  .map-u.u-xl-pl-3 { padding-left: var(--u-space-3); }
  .map-u.u-xl-pl-4 { padding-left: var(--u-space-4); }
  .map-u.u-xl-pl-5 { padding-left: var(--u-space-5); }
  .map-u.u-xl-px-0 { padding-left: var(--u-space-0); padding-right: var(--u-space-0); }
  .map-u.u-xl-py-0 { padding-top: var(--u-space-0); padding-bottom: var(--u-space-0); }
  .map-u.u-xl-px-1 { padding-left: var(--u-space-1); padding-right: var(--u-space-1); }
  .map-u.u-xl-py-1 { padding-top: var(--u-space-1); padding-bottom: var(--u-space-1); }
  .map-u.u-xl-px-2 { padding-left: var(--u-space-2); padding-right: var(--u-space-2); }
  .map-u.u-xl-py-2 { padding-top: var(--u-space-2); padding-bottom: var(--u-space-2); }
  .map-u.u-xl-px-3 { padding-left: var(--u-space-3); padding-right: var(--u-space-3); }
  .map-u.u-xl-py-3 { padding-top: var(--u-space-3); padding-bottom: var(--u-space-3); }
  .map-u.u-xl-px-4 { padding-left: var(--u-space-4); padding-right: var(--u-space-4); }
  .map-u.u-xl-py-4 { padding-top: var(--u-space-4); padding-bottom: var(--u-space-4); }
  .map-u.u-xl-px-5 { padding-left: var(--u-space-5); padding-right: var(--u-space-5); }
  .map-u.u-xl-py-5 { padding-top: var(--u-space-5); padding-bottom: var(--u-space-5); }
}


/*
 * ===============================================
 * Background Color Utilities
 * ===============================================
 */

/* --- Neutrals --- */

.map-u.u-bg-white {
  background-color: var(--Neutral-White);
}

.map-u.u-bg-neutral-8 {
  background-color: var(--Neutral-8);
}

.map-u.u-bg-neutral-16 {
  background-color: var(--Neutral-16);
}

.map-u.u-bg-neutral-32 {
  background-color: var(--Neutral-32);
}

.map-u.u-bg-neutral-48 {
  background-color: var(--Neutral-48);
}

.map-u.u-bg-neutral-64 {
  background-color: var(--Neutral-64);
}

.map-u.u-bg-neutral-80 {
  background-color: var(--Neutral-80);
}

.map-u.u-bg-neutral-90 {
  background-color: var(--Neutral-90);
}

.map-u.u-bg-black {
  background-color: var(--Neutral-Black);
}

/* --- Highlight --- */

.map-u.u-bg-viking {
  background-color: var(--highlight-viking);
}