.vf-u-clearfix::before {
  content: '';
  display: table;
}
.vf-u-clearfix::after {
  clear: both;
  content: '';
  display: table;
}

.vf-u-float__left {
  float: left !important;
}

.vf-u-float__right {
  float: right !important;
}

.vf-u-float__none {
  float: none !important;
}

@media (min-width: $vf-breakpoint--xs) {
  .vf-u-float__left--xs {
    float: left !important;
  }
  .vf-u-float__right--xs {
    float: right !important;
  }
  .vf-u-float__none--xs {
    float: none !important;
  }
}

@media (min-width: $vf-breakpoint--sm) {
  .vf-u-float__left--sm {
    float: left !important;
  }
  .vf-u-float__right--sm {
    float: right !important;
  }
  .vf-u-float__none--sm {
    float: none !important;
  }
}

@media (min-width: $vf-breakpoint--md) {
  .vf-u-float__left--md {
    float: left !important;
  }
  .vf-u-float__right--md {
    float: right !important;
  }
  .vf-u-float__none--md {
    float: none !important;
  }
}

@media (min-width: $vf-breakpoint--lg) {
  .vf-u-float__left--lg {
    float: left !important;
  }
  .vf-u-float__right--lg {
    float: right !important;
  }
  .vf-u-float__none--lg {
    float: none !important;
  }
}

@media (min-width: $vf-breakpoint--xl) {
  .vf-u-float__left--xl {
    float: left !important;
  }
  .vf-u-float__right--xl {
    float: right !important;
  }
  .vf-u-float__none--xl {
    float: none !important;
  }
}