.vbx-column {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: auto;

  margin-top: var(--vbx-margin-top, 0px);
  margin-right: var(--vbx-margin-right, 0px);
  margin-bottom: var(--vbx-margin-bottom, 0px);
  margin-left: var(--vbx-margin-left, 0px);

  padding-top: var(--vbx-padding-top, 0px);
  padding-right: var(--vbx-padding-right, 0px);
  padding-bottom: var(--vbx-padding-bottom, 0px);
  padding-left: var(--vbx-padding-left, 0px);

  background-color: var(--vbx-background-color, transparent);

  &.vbx-column-width-1_6,
  &.vbx-column-width-1_5,
  &.vbx-column-width-1_4,
  &.vbx-column-width-1_3,
  &.vbx-column-width-1_2,
  &.vbx-column-width-1_1,
  &.vbx-column-width-2_3,
  &.vbx-column-width-2_5,
  &.vbx-column-width-3_4,
  &.vbx-column-width-3_5,
  &.vbx-column-width-4_5,
  &.vbx-column-width-5_6,
  &.vbx-column-width-auto {
    width: 100%;
  }

  &.vbx-column-align-start {
    align-items: flex-start;
  }

  &.vbx-column-align-center {
    align-items: center;
  }

  &.vbx-column-align-end {
    align-items: flex-end;
  }

  &.vbx-column-align-stretch {
    align-items: stretch;
  }

  &.vbx-content-align-start {
    justify-content: flex-start;
  }

  &.vbx-content-align-center {
    justify-content: center;
  }

  &.vbx-content-align-end {
    justify-content: flex-end;
  }

  &.vbx-content-align-space-between {
    justify-content: space-between;
  }

  &.vbx-content-align-space-around {
    justify-content: space-around;
  }

  &.vbx-content-align-space-evenly {
    justify-content: space-evenly;
  }
}

@media screen and (min-width: 64rem) {
  .vbx-column {
    &.vbx-column-width-1_6 {
      width: calc(100% / 6);
    }

    &.vbx-column-width-1_5 {
      width: calc(100% / 5);
    }

    &.vbx-column-width-1_4 {
      width: calc(100% / 4);
    }

    &.vbx-column-width-1_3 {
      width: calc(100% / 3);
    }

    &.vbx-column-width-1_2 {
      width: calc(100% / 2);
    }

    &.vbx-column-width-1_1 {
      width: calc(100% / 1);
    }

    &.vbx-column-width-2_3 {
      width: calc(200% / 3);
    }

    &.vbx-column-width-2_5 {
      width: calc(200% / 5);
    }

    &.vbx-column-width-3_4 {
      width: calc(300% / 4);
    }

    &.vbx-column-width-3_5 {
      width: calc(300% / 5);
    }

    &.vbx-column-width-4_5 {
      width: calc(300% / 4);
    }

    &.vbx-column-width-5_6 {
      width: calc(500% / 6);
    }

    &.vbx-column-width-auto {
      width: auto;
    }
  }
}