.Columns {
  --grid-columns: 12;
  --column-gap: 20px;
  --row-gap: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--row-gap) var(--column-gap);
}

.Columns > * {
  width: 100%;
  min-width: 0;
}

.Column-1 {
  --column-span: 1;
}

.Column-2 {
  --column-span: 2;
}

.Column-3 {
  --column-span: 3;
}

.Column-4 {
  --column-span: 4;
}

.Column-5 {
  --column-span: 5;
}

.Column-6 {
  --column-span: 6;
}

.Column-7 {
  --column-span: 7;
}

.Column-8 {
  --column-span: 8;
}

.Column-9 {
  --column-span: 9;
}

.Column-10 {
  --column-span: 10;
}

.Column-11 {
  --column-span: 11;
}

.Column-12 {
  --column-span: 12;
}

.Column-1,
.Column-2,
.Column-3,
.Column-4,
.Column-5,
.Column-6,
.Column-7,
.Column-8,
.Column-9,
.Column-10,
.Column-11,
.Column-12 {
  flex: initial;
  width: calc((100% - (var(--grid-columns) - 1) * var(--column-gap)) * var(--column-span) / var(--grid-columns) + (var(--column-span) - 1) * var(--column-gap));
}

.Column {
  flex: 1 1 0;
  width: auto;
}

.Column-content {
  flex: 0 1 auto;
  width: auto;
}

@media screen and (min-width: 2px) {
  .Column-1\@sm {
    --column-span: 1;
  }

  .Column-2\@sm {
    --column-span: 2;
  }

  .Column-3\@sm {
    --column-span: 3;
  }

  .Column-4\@sm {
    --column-span: 4;
  }

  .Column-5\@sm {
    --column-span: 5;
  }

  .Column-6\@sm {
    --column-span: 6;
  }

  .Column-7\@sm {
    --column-span: 7;
  }

  .Column-8\@sm {
    --column-span: 8;
  }

  .Column-9\@sm {
    --column-span: 9;
  }

  .Column-10\@sm {
    --column-span: 10;
  }

  .Column-11\@sm {
    --column-span: 11;
  }

  .Column-12\@sm {
    --column-span: 12;
  }

  .Column-1\@sm,
  .Column-2\@sm,
  .Column-3\@sm,
  .Column-4\@sm,
  .Column-5\@sm,
  .Column-6\@sm,
  .Column-7\@sm,
  .Column-8\@sm,
  .Column-9\@sm,
  .Column-10\@sm,
  .Column-11\@sm,
  .Column-12\@sm {
    flex: initial;
    width: calc((100% - (var(--grid-columns) - 1) * var(--column-gap)) * var(--column-span) / var(--grid-columns) + (var(--column-span) - 1) * var(--column-gap));
  }

  .Column\@sm {
    flex: 1 1 0;
    width: auto;
  }

  .Column-content\@sm {
    flex: 0 1 auto;
    width: auto;
  }

}

@media screen and (min-width: 769px) {
  .Column-2\@md {
    --column-span: 2;
  }

  .Column-3\@md {
    --column-span: 3;
  }

  .Column-4\@md {
    --column-span: 4;
  }

  .Column-5\@md {
    --column-span: 5;
  }

  .Column-6\@md {
    --column-span: 6;
  }

  .Column-7\@md {
    --column-span: 7;
  }

  .Column-8\@md {
    --column-span: 8;
  }

  .Column-9\@md {
    --column-span: 9;
  }

  .Column-10\@md {
    --column-span: 10;
  }

  .Column-11\@md {
    --column-span: 11;
  }

  .Column-12\@md {
    --column-span: 12;
  }

  .Column-1\@md,
  .Column-2\@md,
  .Column-3\@md,
  .Column-4\@md,
  .Column-5\@md,
  .Column-6\@md,
  .Column-7\@md,
  .Column-8\@md,
  .Column-9\@md,
  .Column-10\@md,
  .Column-11\@md,
  .Column-12\@md {
    flex: initial;
    width: calc((100% - (var(--grid-columns) - 1) * var(--column-gap)) * var(--column-span) / var(--grid-columns) + (var(--column-span) - 1) * var(--column-gap));
  }

  .Column\@md {
    flex: 1 1 0;
    width: auto;
  }

  .Column-content\@md {
    flex: 0 1 auto;
    width: auto;
  }
}

@media screen and (min-width: 1026px) {
  .Column-2\@lg {
    --column-span: 2;
  }

  .Column-3\@lg {
    --column-span: 3;
  }

  .Column-4\@lg {
    --column-span: 4;
  }

  .Column-5\@lg {
    --column-span: 5;
  }

  .Column-6\@lg {
    --column-span: 6;
  }

  .Column-7\@lg {
    --column-span: 7;
  }

  .Column-8\@lg {
    --column-span: 8;
  }

  .Column-9\@lg {
    --column-span: 9;
  }

  .Column-10\@lg {
    --column-span: 10;
  }

  .Column-11\@lg {
    --column-span: 11;
  }

  .Column-12\@lg {
    --column-span: 12;
  }

  .Column-1\@lg,
  .Column-2\@lg,
  .Column-3\@lg,
  .Column-4\@lg,
  .Column-5\@lg,
  .Column-6\@lg,
  .Column-7\@lg,
  .Column-8\@lg,
  .Column-9\@lg,
  .Column-10\@lg,
  .Column-11\@lg,
  .Column-12\@lg {
    flex: initial;
    width: calc((100% - (var(--grid-columns) - 1) * var(--column-gap)) * var(--column-span) / var(--grid-columns) + (var(--column-span) - 1) * var(--column-gap));
  }

  .Column\@lg {
    flex: 1 1 0;
    width: auto;
  }

  .Column-content\@lg {
    flex: 0 1 auto;
    width: auto;
  }
}

.Columns--align-top {
  align-items: start;
}

.Columns--align-middle {
  align-items: center;
}

.Columns--align-bottom {
  align-items: end;
}

.Column--align-top {
  align-self: start;
}

.Column--align-middle {
  align-self: center;
}

.Column--align-bottom {
  align-self: end;
}