:root {
    /* Global Gap Variables - Editable */
  --gap-xxs: clamp(0.25rem, 1vw, 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);
}