.moixo-layout {
  --moixo-gap-h: 0px;
  --moixo-gap-v: 0px;
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--moixo-gap-h);
  row-gap: var(--moixo-gap-v);
}

.moixo-layout__region {
  min-width: 0;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* -- 2 columnes (50/50) -- */
@media (min-width: 768px) {
  .moixo-layout--twocol > .moixo-layout__region {
    width: calc(50% - var(--moixo-gap-h) / 2);
  }
}

/* -- 2 columnes (33/66) -- */
@media (min-width: 768px) {
  .moixo-layout--twocol-33-66 > .layout__region--first {
    width: calc(100% / 3 - var(--moixo-gap-h) / 2);
  }
  .moixo-layout--twocol-33-66 > .layout__region--second {
    width: calc(200% / 3 - var(--moixo-gap-h) / 2);
  }
}

/* -- 2 columnes (66/33) -- */
@media (min-width: 768px) {
  .moixo-layout--twocol-66-33 > .layout__region--first {
    width: calc(200% / 3 - var(--moixo-gap-h) / 2);
  }
  .moixo-layout--twocol-66-33 > .layout__region--second {
    width: calc(100% / 3 - var(--moixo-gap-h) / 2);
  }
}

/* -- 3 columnes (33/33/33) -- */
@media (min-width: 768px) {
  .moixo-layout--threecol > .moixo-layout__region {
    width: calc(100% / 3 - var(--moixo-gap-h) * 2 / 3);
  }
}

/* -- 4 columnes (25/25/25/25) -- */
@media (min-width: 768px) {
  .moixo-layout--fourcol > .moixo-layout__region {
    width: calc(50% - var(--moixo-gap-h) / 2);
  }
}

@media (min-width: 992px) {
  .moixo-layout--fourcol > .moixo-layout__region {
    width: calc(25% - var(--moixo-gap-h) * 3 / 4);
  }
}