.Columns {
  display: flex;
  flex-direction: column;
  gap: var(--spaces);
}

@media screen and (min-width: 1024px) {

.Columns {
    flex-direction: row;
}
  }

.Columns > script {
    display: none !important;
  }

.Columns > .Column {
    display: flex;
    flex: 0 0 100%;
    flex-direction: column;
    gap: var(--spaces);
    max-width: 100%;
  }

.Columns > .Column > .Column:last-child {
      flex: 1;
    }

@media screen and (min-width: 1024px) {
  .Columns--50-50 {
    > .Column {
      flex-basis: 50%;
      max-width: calc(50% - var(--spaces));
    }
  }

  .Columns--25-75 {
    > .Column:nth-child(1) {
      flex-basis: 25%;
      max-width: calc(25% - var(--spaces));
    }

    > .Column:nth-child(2) {
      flex-basis: 75%;
      max-width: calc(75% - var(--spaces));
    }
  }

  .Columns--75-25 {
    > .Column:nth-child(1) {
      flex-basis: 75%;
      max-width: calc(75% - var(--spaces));
    }

    > .Column:nth-child(2) {
      flex-basis: 25%;
      max-width: calc(25% - var(--spaces));
    }
  }

  .Columns--33-66 {
    > .Column:nth-child(1) {
      flex-basis: 33%;
      max-width: calc(33% - var(--spaces));
    }

    > .Column:nth-child(2) {
      flex-basis: 67%;
      max-width: calc(67% - var(--spaces));
    }

  }

  .Columns--66-33 {
    > .Column:nth-child(1) {
      flex-basis: 67%;
      max-width: calc(67% - var(--spaces));
    }

    > .Column:nth-child(2) {
      flex-basis: 33%;
      max-width: calc(33% - var(--spaces));
    }
  }

  .Columns--33-33-33 {
    flex-wrap: initial;
  }

    .Columns--33-33-33 > .Column {
      flex-basis: 33%;
      max-width: calc(33% - var(--spaces));
    }

  .Columns--25-25-25-25 {
    flex-wrap: initial;
  }

    .Columns--25-25-25-25 > .Column {
      flex-basis: 25%;
      max-width: calc(25% - var(--spaces));
    }
}

.Column.has-backgroundcolor {
  padding: var(--spaces);
}