:root {
    /* Global Gap Variables - Editable */
 --gap-xxs:  clamp(0.375rem, 0.33rem + 0.23vw, 0.5rem); /* 4px → 8px */
  --gap-xs:  clamp(0.5rem, 1.5vw, 0.75rem); /* 8px → 12px */
  --gap-s:   clamp(0.75rem, 2vw, 1rem);     /* 12px → 16px */
  --gap-m:   1.25rem;                       /* same as the default gaps fixed at 20px */
  --gap-l:   clamp(1.25rem, 3vw, 2.5rem);   /* 20px → 40px */
  --gap-xl:  clamp(1.25rem, 5vw, 3.75rem);  /* 20px → 60px */
  --gap-xxl: clamp(1.25rem, 10vw, 7.5rem);  /* 20px → 120px */
}

/* gap classes */
.gap-xxs {
    gap: var(--gap-xxs);
}

.gap-xxs > .e-con-inner {
    gap: var(--gap-xxs);
}

.gap-xs {
    gap: var(--gap-xs);
}

.gap-xs > .e-con-inner {
    gap: var(--gap-xs);
}

.gap-s {
    gap: var(--gap-s);
}

.gap-s > .e-con-inner {
    gap: var(--gap-s);
}

.gap-m {
    gap: var(--gap-m);
}

.gap-m > .e-con-inner {
    gap: var(--gap-m);
}

.gap-l {
    gap: var(--gap-l);
}

.gap-l > .e-con-inner {
    gap: var(--gap-l);
}

.gap-xl {
    gap: var(--gap-xl);
}

.gap-xl > .e-con-inner {
    gap: var(--gap-xl);
}

.gap-xxl {
    gap: var(--gap-xxl);
}

.gap-xxl > .e-con-inner {
    gap: var(--gap-xxl);
}