.vbx-grid-container {
  width: 100%;
  height: fit-content;
  background-color: var(--vbx-grid-container--background-color, transparent);
  margin: var(--vbx-grid-container--margin, 0);
  padding: var(--vbx-grid-container--padding, 0);

  /* Width modifiers */
  &[class*="--width-site"] {
    & > .vbx-grid-container__content {
      width: min(var(--vbx-site-max-width, 100%), 100%);
    }
  }
  &[class*="--width-full"] {
    & > .vbx-grid-container__content {
      width: 100%;
    }
  }
  &[class*="--width-fit-content"] {
    & > .vbx-grid-container__content {
      width: fit-content;
    }
  }

  /* Height modifiers */
  &[class*="--height-auto"] {
    & > .vbx-grid-container__content {
      height: auto;
    }
  }
  &[class*="--height-full"] {
    height: 100%;

    & > .vbx-grid-container__content {
      height: 100%;
    }
  }
  &[class*="--height-viewport-height"] {
    & > .vbx-grid-container__content {
      height: 100vh;
      height: 100dvh;
    }
    &[data-canvas-preview="true"] {
      height: 100%;

      & > .vbx-grid-container__content {
        height: 100%;
      }
    }
  }

  /* Align-items modifiers */
  &[class*="--align-items-start"] {
    & > .vbx-grid-container__content {
      align-items: start;
    }
  }
  &[class*="--align-items-end"] {
    & > .vbx-grid-container__content {
      align-items: end;
    }
  }
  &[class*="--align-items-center"] {
    & > .vbx-grid-container__content {
      align-items: center;
    }
  }
  &[class*="--align-items-baseline"] {
    & > .vbx-grid-container__content {
      align-items: baseline;
    }
  }

  /* Justify-items modifiers */
  &[class*="--justify-items-start"] {
    & > .vbx-grid-container__content {
      justify-items: start;
    }
  }
  &[class*="--justify-items-end"] {
    & > .vbx-grid-container__content {
      justify-items: end;
    }
  }
  &[class*="--justify-items-center"] {
    & > .vbx-grid-container__content {
      justify-items: center;
    }
  }
}

.vbx-grid-container__content {
  display: grid;
  gap: var(--vbx-grid-container--gap, 0);
  margin: 0 auto;
  width: auto;
  height: auto;
  max-width: 100%;
  grid-template-columns: var(--vbx-grid-container--columns, none);
  grid-template-rows: var(--vbx-grid-container--rows, none);
  align-items: stretch;
  justify-items: stretch;
}