/////////////////////////////////
// CORE / UTILITIES / CSS COLUMNS
/////////////////////////////////


[class*='dcf-columns-'] {
  column-gap: $length-vw-1;
}


[class*='dcf-columns-'] > * {
  break-inside: avoid;
}


// .dcf-columns-1 is unnecessary as content is one column by default
.dcf-columns-2 { @include columns-2(!important); }
.dcf-columns-3 { @include columns-3(!important); }
.dcf-columns-auto { @include columns-auto(!important); }


@include mq(sm, min, width) {

  .dcf-columns-1\@sm { @include columns-1(!important); }
  .dcf-columns-2\@sm { @include columns-2(!important); }
  .dcf-columns-3\@sm { @include columns-3(!important); }

}


@include mq(md, min, width) {

  .dcf-columns-1\@md { @include columns-1(!important); }
  .dcf-columns-2\@md { @include columns-2(!important); }
  .dcf-columns-3\@md { @include columns-3(!important); }

}


@include mq(lg, min, width) {

  .dcf-columns-1\@lg { @include columns-1(!important); }
  .dcf-columns-2\@lg { @include columns-2(!important); }
  .dcf-columns-3\@lg { @include columns-3(!important); }

}


@include mq(xl, min, width) {

  .dcf-columns-1\@xl { @include columns-1(!important); }
  .dcf-columns-2\@xl { @include columns-2(!important); }
  .dcf-columns-3\@xl { @include columns-3(!important); }

}