/*!*************************
*****     columns     ******
***************************/

@layer utility {
  .single-column,
  .two-column,
  .three-column,
  .four-column {
    -moz-column-gap: var(--sp-4);
         column-gap: var(--sp-4);
  }

    @media (min-width: 768.02px) {
  .single-column,
  .two-column,
  .three-column,
  .four-column {
      -moz-column-gap: var(--sp-8);
           column-gap: var(--sp-8);
  }
    }

    @media (min-width: 1024.02px) {
  .single-column,
  .two-column,
  .three-column,
  .four-column {
      -moz-column-gap: var(--sp-16);
           column-gap: var(--sp-16);
  }
    }

  .single-column {
    -moz-columns: 260px 1;
         columns: 260px 1;
  }
  .two-column {
    -moz-columns: 260px 2;
         columns: 260px 2;
  }
  .three-column {
    -moz-columns: 260px 3;
         columns: 260px 3;
  }
  .four-column {
    -moz-columns: 260px 4;
         columns: 260px 4;
  }
}