@use "variables";

/* =Blocks Responsive
-----------------------------------------------------------------------------*/
@media only screen and (max-width: 767px) {

  .blocks-2,
  .blocks-3,
  .blocks-4,
  .blocks-5,
  .blocks-6 {
    margin-bottom: variables.$base-line;
  }

  .blocks-2 > li,
  .blocks-3 > li,
  .blocks-4 > li,
  .blocks-5 > li,
  .blocks-6 > li {
    flex: 0 0 100%;
  }

  .blocks-mobile-50 > li {
    flex: 0 0 calc(50% - variables.$grid-gutter-width * 0.5);
  }
  .blocks-mobile-33 > li {
    flex: 0 0 calc(33.333% - variables.$grid-gutter-width * 2 / 3);
  }

}