/**
 * BS3 used floats for grids (because flexbox didn't exist back then). Because
 * it didn't use flexbox, we run into column wrapping issues (e.g. if card 1 is
 * taller than card 2, card 3 will wrap under card 2 instead of a new row).
 *
 * These responsive clearfix classes allow us to wrap/unwrap the columns as
 * needed at specific breakpoints. Use in conjunction with BS col-* classes.
 *
 * @see https://medium.com/wdstack/varying-column-heights-in-bootstrap-4e8dd5338643
 */

@media (min-width: 0px) {
  .clearfix-xs {
    display: block;
    clear: both;
    content: "";
  }

  .clearfix-xs-none {
    display: revert;
    clear: revert;
    content: revert;
  }
}

@media (min-width: 768px) {
  .clearfix-sm {
    display: block;
    clear: both;
    content: "";
  }

  .clearfix-sm-none {
    display: revert;
    clear: revert;
    content: revert;
  }
}

@media (min-width: 992px) {
  .clearfix-md {
    display: block;
    clear: both;
    content: "";
  }

  .clearfix-md-none {
    display: revert;
    clear: revert;
    content: revert;
  }
}

@media (min-width: 1200px) {
  .clearfix-lg {
    display: block;
    clear: both;
    content: "";
  }

  .clearfix-lg-none {
    display: revert;
    clear: revert;
    content: revert;
  }
}