@media (max-width: 767px) {
  :root {
    --columnGap: 12px;
    --outsideGap: 16px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  :root {
    --columnGap: 16px;
    --outsideGap: 20px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  :root {
    --columnGap: 16px;
    --outsideGap: 32px;
  }
}

@media (min-width: 1200px) and (max-width: 1599px) {
  :root {
    --columnGap: 24px;
    --outsideGap: 36px;
  }
}

@media (min-width: 1600px) {
  :root {
    --columnGap: 24px;
    --outsideGap: 48px;
  }
}

:root {
  --outsideGapFix: calc(-1 * var(--outsideGap));
  --maxWidth: 1704px;
}

@media (min-width: 1800px) { /*  maxWidth + 2 * outsideGap */
  :root {
    --containerWidth: var(--maxWidth);
  }
} 

@media (max-width: 1799px) { /* maxWidth + 2 * outsideGap - 1 */
  :root {
    --containerWidth: calc(100vw - 2 * var(--outsideGap));
  }
}

:root {
  --columnGapWidth: calc((var(--containerWidth) + var(--columnGap)) / 12);
}

:root { 
  --col-1-gap: calc(var(--columnGapWidth) * 1);
  --col-2-gap: calc(var(--columnGapWidth) * 2);
  --col-3-gap: calc(var(--columnGapWidth) * 3);
  --col-4-gap: calc(var(--columnGapWidth) * 4);
  --col-5-gap: calc(var(--columnGapWidth) * 5);
  --col-6-gap: calc(var(--columnGapWidth) * 6);
  --col-7-gap: calc(var(--columnGapWidth) * 7);
  --col-8-gap: calc(var(--columnGapWidth) * 8);
  --col-9-gap: calc(var(--columnGapWidth) * 9);
  --col-10-gap: calc(var(--columnGapWidth) * 10);
  --col-11-gap: calc(var(--columnGapWidth) * 11);
  --col-12-gap: calc(var(--columnGapWidth) * 12);

  --col-1: calc(var(--col-1-gap) - var(--columnGap));
  --col-2: calc(var(--col-2-gap) - var(--columnGap));
  --col-3: calc(var(--col-3-gap) - var(--columnGap));
  --col-4: calc(var(--col-4-gap) - var(--columnGap));
  --col-5: calc(var(--col-5-gap) - var(--columnGap));
  --col-6: calc(var(--col-6-gap) - var(--columnGap));
  --col-7: calc(var(--col-7-gap) - var(--columnGap));
  --col-8: calc(var(--col-8-gap) - var(--columnGap));
  --col-9: calc(var(--col-9-gap) - var(--columnGap));
  --col-10: calc(var(--col-10-gap) - var(--columnGap));
  --col-11: calc(var(--col-11-gap) - var(--columnGap));
  --col-12: calc(var(--col-12-gap) - var(--columnGap));
}

:root .from-parent > :is(.swiper-slide, .keen-slider__slide, .vc_column_container) {
  --columnGapParentWidth: calc((100% + var(--columnGap)) / 12);

  --col-1-gap: calc(var(--columnGapParentWidth) * 1);
  --col-2-gap: calc(var(--columnGapParentWidth) * 2);
  --col-3-gap: calc(var(--columnGapParentWidth) * 3);
  --col-4-gap: calc(var(--columnGapParentWidth) * 4);
  --col-5-gap: calc(var(--columnGapParentWidth) * 5);
  --col-6-gap: calc(var(--columnGapParentWidth) * 6);
  --col-7-gap: calc(var(--columnGapParentWidth) * 7);
  --col-8-gap: calc(var(--columnGapParentWidth) * 8);
  --col-9-gap: calc(var(--columnGapParentWidth) * 9);
  --col-10-gap: calc(var(--columnGapParentWidth) * 10);
  --col-11-gap: calc(var(--columnGapParentWidth) * 11);
  --col-12-gap: calc(var(--columnGapParentWidth) * 12);

  --col-1: calc(var(--col-1-gap) - var(--columnGap));
  --col-2: calc(var(--col-2-gap) - var(--columnGap));
  --col-3: calc(var(--col-3-gap) - var(--columnGap));
  --col-4: calc(var(--col-4-gap) - var(--columnGap));
  --col-5: calc(var(--col-5-gap) - var(--columnGap));
  --col-6: calc(var(--col-6-gap) - var(--columnGap));
  --col-7: calc(var(--col-7-gap) - var(--columnGap));
  --col-8: calc(var(--col-8-gap) - var(--columnGap));
  --col-9: calc(var(--col-9-gap) - var(--columnGap));
  --col-10: calc(var(--col-10-gap) - var(--columnGap));
  --col-11: calc(var(--col-11-gap) - var(--columnGap));
  --col-12: 100%;
}

body,
.vc_section,
section,
content,
header,
footer,
menu,
body .wpb-content-wrapper {
  display: flex;
  flex-flow: column;
  align-items: center;
}

body .wpb-content-wrapper {
  flex-grow: 1;
  overflow: clip;
}

body>.vc_row, 
:is(header, footer, menu)>.wrapper, 
:is(.vc_section, section, content, .wpb-content-wrapper) > *, 
.debugger-cols, 
.vc_row.full-width > .vc_column_container > .vc_row {
  max-width: var(--containerWidth);
  width: 100%;
  align-self: center;
}

.vc_section,
section,
.wpb-content-wrapper,
content {
  max-width: 100%;
  width: 100%;
  column-gap: var(--columnGap);
}

.vc_row:not(.full-width) > .vc_column_container > :is(.vc_row:not(.full-width), .vc_inner) {
  width: 100%
}

.vc_row.full-width,
.vc_row section {
  width: 100vw;
  max-width: unset;
  align-self: center;
}

div.wpb-content-wrapper > :is(.vc_row):has(.swiper, .keen-slider),
body > :is(.vc_row):has(.swiper, .keen-slider) {
  /* overflow: hidden; */
  width: 100vw;
  max-width: unset;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

div.wpb-content-wrapper > :is(.vc_row):has(.swiper, .keen-slider) > .vc_column_container.vc_col-sm-12,
body > :is(.vc_row):has(.swiper, .keen-slider) > .vc_column_container.vc_col-sm-12 {
  max-width: var(--containerWidth);
  width: 100% !important;
}

@media (max-width: 768px) {
  div.wpb-content-wrapper > :is(.vc_row):has(.swiper, .keen-slider) > .vc_column_container:not(.vc_col-sm-12),
  body > :is(.vc_row):has(.swiper, .keen-slider) > .vc_column_container:not(.vc_col-sm-12) {
    max-width: var(--containerWidth);
    width: 100% !important;
    height: unset;
  }
}
  
@supports (display: grid) {
  .debugger-cols,
  .vc_row {
    display: grid;
    column-gap: var(--columnGap);
    grid-template-columns: repeat(12, 1fr);
  }
}

@supports not (display: grid) {}