/*
0.5rem = 8px
1rem = 16px
2rem = 32px
4rem = 64px
6rem = 96px
8rem = 128px
12rem = 192px
16rem = 256px
*/

:root {
  --gap-xxs: 0.5rem;
  --gap-xs:  1rem;
  --gap-s:   2rem;

  --gap-m:  clamp(2rem, calc(1.273rem + 3.636vw), 4rem);
  --gap-l:  clamp(2rem, calc(0.545rem + 7.273vw), 6rem);
  --gap-xl: clamp(2rem, calc(-0.182rem + 10.909vw), 8rem);

  --gap-2xl: clamp(2rem, calc(-1.636rem + 18.182vw), 12rem);
  --gap-3xl: clamp(2rem, calc(-3.091rem + 25.455vw), 16rem);
}


/* 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-2xl {
  gap: var(--gap-2xl);
}

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

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

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