/* =========================================================
SNIPPET: 20 - Gap Utilities
WOFÜR:
- Einheitliche Abstände für Container, Grid, Loop Grid,
  Loop Carousel und WP Media Folder Gallery
KLASSEN:
- gap-{0|xxs|xs|s|m|l|xl|xxl|xxxl}  → beide Achsen
- gx-{...}                          → nur horizontal
- gy-{...}                          → nur vertikal
WERTE KOMMEN VON:
- Tokens: var(--gap-*)
========================================================= */


/* =========================================================
   1) GAP TOKENS ZUWEISEN
========================================================= */
.elementor .gap-0    { --_gap: var(--gap-0); }
.elementor .gap-xxs  { --_gap: var(--gap-xxs); }
.elementor .gap-xs   { --_gap: var(--gap-xs); }
.elementor .gap-s    { --_gap: var(--gap-s); }
.elementor .gap-m    { --_gap: var(--gap-m); }
.elementor .gap-l    { --_gap: var(--gap-l); }
.elementor .gap-xl   { --_gap: var(--gap-xl); }
.elementor .gap-xxl  { --_gap: var(--gap-xxl); }
.elementor .gap-xxxl { --_gap: var(--gap-xxxl); }

.elementor .gx-0     { --_gx: var(--gap-0); }
.elementor .gx-xxs   { --_gx: var(--gap-xxs); }
.elementor .gx-xs    { --_gx: var(--gap-xs); }
.elementor .gx-s     { --_gx: var(--gap-s); }
.elementor .gx-m     { --_gx: var(--gap-m); }
.elementor .gx-l     { --_gx: var(--gap-l); }
.elementor .gx-xl    { --_gx: var(--gap-xl); }
.elementor .gx-xxl   { --_gx: var(--gap-xxl); }
.elementor .gx-xxxl  { --_gx: var(--gap-xxxl); }

.elementor .gy-0     { --_gy: var(--gap-0); }
.elementor .gy-xxs   { --_gy: var(--gap-xxs); }
.elementor .gy-xs    { --_gy: var(--gap-xs); }
.elementor .gy-s     { --_gy: var(--gap-s); }
.elementor .gy-m     { --_gy: var(--gap-m); }
.elementor .gy-l     { --_gy: var(--gap-l); }
.elementor .gy-xl    { --_gy: var(--gap-xl); }
.elementor .gy-xxl   { --_gy: var(--gap-xxl); }
.elementor .gy-xxxl  { --_gy: var(--gap-xxxl); }


/* =========================================================
   2) STANDARD: CONTAINER / FLEX / GRID / LOOP GRID
========================================================= */

/* beide Achsen */
.elementor :is(.gap-0, .gap-xxs, .gap-xs, .gap-s, .gap-m, .gap-l, .gap-xl, .gap-xxl, .gap-xxxl),
.elementor :is(.gap-0, .gap-xxs, .gap-xs, .gap-s, .gap-m, .gap-l, .gap-xl, .gap-xxl, .gap-xxxl) > .e-con-inner,
.elementor :is(.gap-0, .gap-xxs, .gap-xs, .gap-s, .gap-m, .gap-l, .gap-xl, .gap-xxl, .gap-xxxl) > .elementor-container,
.elementor :is(.gap-0, .gap-xxs, .gap-xs, .gap-s, .gap-m, .gap-l, .gap-xl, .gap-xxl, .gap-xxxl) > .elementor-widget-container > .elementor-loop-container {
  gap: var(--_gap) !important;
}

/* horizontal */
.elementor :is(.gx-0, .gx-xxs, .gx-xs, .gx-s, .gx-m, .gx-l, .gx-xl, .gx-xxl, .gx-xxxl),
.elementor :is(.gx-0, .gx-xxs, .gx-xs, .gx-s, .gx-m, .gx-l, .gx-xl, .gx-xxl, .gx-xxxl) > .e-con-inner,
.elementor :is(.gx-0, .gx-xxs, .gx-xs, .gx-s, .gx-m, .gx-l, .gx-xl, .gx-xxl, .gx-xxxl) > .elementor-container,
.elementor :is(.gx-0, .gx-xxs, .gx-xs, .gx-s, .gx-m, .gx-l, .gx-xl, .gx-xxl, .gx-xxxl) > .elementor-widget-container > .elementor-loop-container {
  column-gap: var(--_gx) !important;
}

/* vertikal */
.elementor :is(.gy-0, .gy-xxs, .gy-xs, .gy-s, .gy-m, .gy-l, .gy-xl, .gy-xxl, .gy-xxxl),
.elementor :is(.gy-0, .gy-xxs, .gy-xs, .gy-s, .gy-m, .gy-l, .gy-xl, .gy-xxl, .gy-xxxl) > .e-con-inner,
.elementor :is(.gy-0, .gy-xxs, .gy-xs, .gy-s, .gy-m, .gy-l, .gy-xl, .gy-xxl, .gy-xxxl) > .elementor-container,
.elementor :is(.gy-0, .gy-xxs, .gy-xs, .gy-s, .gy-m, .gy-l, .gy-xl, .gy-xxl, .gy-xxxl) > .elementor-widget-container > .elementor-loop-container {
  row-gap: var(--_gy) !important;
}