/* Multi-column text-flow utilities */

/* Base: all viewport sizes */
.columns-1,
.columns-2,
.columns-3,
.columns-4,
.columns-5,
.columns-6 {
  column-gap: 1rem;
  -webkit-column-gap: 1rem;
}

.columns-1 {
  column-count: 1;
  -webkit-column-break-inside: avoid;
  break-inside: avoid-column;
}
.columns-2 {
  column-count: 2;
  -webkit-column-break-inside: avoid;
  break-inside: avoid-column;
}
.columns-3 {
  column-count: 3;
  -webkit-column-break-inside: avoid;
  break-inside: avoid-column;
}
.columns-4 {
  column-count: 4;
  -webkit-column-break-inside: avoid;
  break-inside: avoid-column;
}
.columns-5 {
  column-count: 5;
  -webkit-column-break-inside: avoid;
  break-inside: avoid-column;
}
.columns-6 {
  column-count: 6;
  -webkit-column-break-inside: avoid;
  break-inside: avoid-column;
}

/* SM: ≥576px */
@media (min-width: 576px) {
  .columns-sm-1,
  .columns-sm-2,
  .columns-sm-3,
  .columns-sm-4,
  .columns-sm-5,
  .columns-sm-6 {
    column-gap: 1rem;
    -webkit-column-gap: 1rem;
  }

  .columns-sm-1 {
    column-count: 1;
    -webkit-column-break-inside: avoid;
    break-inside: avoid-column;
  }
  .columns-sm-2 {
    column-count: 2;
    -webkit-column-break-inside: avoid;
    break-inside: avoid-column;
  }
  .columns-sm-3 {
    column-count: 3;
    -webkit-column-break-inside: avoid;
    break-inside: avoid-column;
  }
  .columns-sm-4 {
    column-count: 4;
    -webkit-column-break-inside: avoid;
    break-inside: avoid-column;
  }
  .columns-sm-5 {
    column-count: 5;
    -webkit-column-break-inside: avoid;
    break-inside: avoid-column;
  }
  .columns-sm-6 {
    column-count: 6;
    -webkit-column-break-inside: avoid;
    break-inside: avoid-column;
  }
}

/* MD: ≥768px */
@media (min-width: 768px) {
  .columns-md-1,
  .columns-md-2,
  .columns-md-3,
  .columns-md-4,
  .columns-md-5,
  .columns-md-6 {
    column-gap: 1rem;
    -webkit-column-gap: 1rem;
  }

  .columns-md-1 {
    column-count: 1;
    -webkit-column-break-inside: avoid;
    break-inside: avoid-column;
  }
  .columns-md-2 {
    column-count: 2;
    -webkit-column-break-inside: avoid;
    break-inside: avoid-column;
  }
  .columns-md-3 {
    column-count: 3;
    -webkit-column-break-inside: avoid;
    break-inside: avoid-column;
  }
  .columns-md-4 {
    column-count: 4;
    -webkit-column-break-inside: avoid;
    break-inside: avoid-column;
  }
  .columns-md-5 {
    column-count: 5;
    -webkit-column-break-inside: avoid;
    break-inside: avoid-column;
  }
  .columns-md-6 {
    column-count: 6;
    -webkit-column-break-inside: avoid;
    break-inside: avoid-column;
  }
}

/* LG: ≥992px */
@media (min-width: 992px) {
  .columns-lg-1,
  .columns-lg-2,
  .columns-lg-3,
  .columns-lg-4,
  .columns-lg-5,
  .columns-lg-6 {
    column-gap: 1rem;
    -webkit-column-gap: 1rem;
  }

  .columns-lg-1 {
    column-count: 1;
    -webkit-column-break-inside: avoid;
    break-inside: avoid-column;
  }
  .columns-lg-2 {
    column-count: 2;
    -webkit-column-break-inside: avoid;
    break-inside: avoid-column;
  }
  .columns-lg-3 {
    column-count: 3;
    -webkit-column-break-inside: avoid;
    break-inside: avoid-column;
  }
  .columns-lg-4 {
    column-count: 4;
    -webkit-column-break-inside: avoid;
    break-inside: avoid-column;
  }
  .columns-lg-5 {
    column-count: 5;
    -webkit-column-break-inside: avoid;
    break-inside: avoid-column;
  }
  .columns-lg-6 {
    column-count: 6;
    -webkit-column-break-inside: avoid;
    break-inside: avoid-column;
  }
}

/* XL: ≥1200px */
@media (min-width: 1200px) {
  .columns-xl-1,
  .columns-xl-2,
  .columns-xl-3,
  .columns-xl-4,
  .columns-xl-5,
  .columns-xl-6 {
    column-gap: 1rem;
    -webkit-column-gap: 1rem;
  }

  .columns-xl-1 {
    column-count: 1;
    -webkit-column-break-inside: avoid;
    break-inside: avoid-column;
  }
  .columns-xl-2 {
    column-count: 2;
    -webkit-column-break-inside: avoid;
    break-inside: avoid-column;
  }
  .columns-xl-3 {
    column-count: 3;
    -webkit-column-break-inside: avoid;
    break-inside: avoid-column;
  }
  .columns-xl-4 {
    column-count: 4;
    -webkit-column-break-inside: avoid;
    break-inside: avoid-column;
  }
  .columns-xl-5 {
    column-count: 5;
    -webkit-column-break-inside: avoid;
    break-inside: avoid-column;
  }
  .columns-xl-6 {
    column-count: 6;
    -webkit-column-break-inside: avoid;
    break-inside: avoid-column;
  }
}

/* XXL: ≥1400px */
@media (min-width: 1400px) {
  .columns-xxl-1,
  .columns-xxl-2,
  .columns-xxl-3,
  .columns-xxl-4,
  .columns-xxl-5,
  .columns-xxl-6 {
    column-gap: 1rem;
    -webkit-column-gap: 1rem;
  }

  .columns-xxl-1 {
    column-count: 1;
    -webkit-column-break-inside: avoid;
    break-inside: avoid-column;
  }
  .columns-xxl-2 {
    column-count: 2;
    -webkit-column-break-inside: avoid;
    break-inside: avoid-column;
  }
  .columns-xxl-3 {
    column-count: 3;
    -webkit-column-break-inside: avoid;
    break-inside: avoid-column;
  }
  .columns-xxl-4 {
    column-count: 4;
    -webkit-column-break-inside: avoid;
    break-inside: avoid-column;
  }
  .columns-xxl-5 {
    column-count: 5;
    -webkit-column-break-inside: avoid;
    break-inside: avoid-column;
  }
  .columns-xxl-6 {
    column-count: 6;
    -webkit-column-break-inside: avoid;
    break-inside: avoid-column;
  }
}
