[class*="block-grid-"] {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
  align-content: flex-start;
  padding: 0;
  margin: 0 -0.625rem;
}

[class*="block-grid-"] > li {
  display: inline;
  height: auto;
  float: left;
  padding: 0 0.625rem 1.25rem;
}

@media only screen {
  .small-block-grid-1 > li {
    width: 100%;
    padding: 0 0.625rem 1.25rem;
    list-style: none;
  }
  .small-block-grid-2 > li {
    width: 50%;
    padding: 0 0.625rem 1.25rem;
    list-style: none;
  }
  .small-block-grid-3 > li {
    width: 33.3333333333%;
    padding: 0 0.625rem 1.25rem;
    list-style: none;
  }
  .small-block-grid-4 > li {
    width: 25%;
    padding: 0 0.625rem 1.25rem;
    list-style: none;
  }
  .small-block-grid-5 > li {
    width: 20%;
    padding: 0 0.625rem 1.25rem;
    list-style: none;
  }
  .small-block-grid-6 > li {
    width: 16.6666666667%;
    padding: 0 0.625rem 1.25rem;
    list-style: none;
  }
  .small-block-grid-7 > li {
    width: 14.2857142857%;
    padding: 0 0.625rem 1.25rem;
    list-style: none;
  }
  .small-block-grid-8 > li {
    width: 12.5%;
    padding: 0 0.625rem 1.25rem;
    list-style: none;
  }
  .small-block-grid-9 > li {
    width: 11.1111111111%;
    padding: 0 0.625rem 1.25rem;
    list-style: none;
  }
  .small-block-grid-10 > li {
    width: 10%;
    padding: 0 0.625rem 1.25rem;
    list-style: none;
  }
  .small-block-grid-11 > li {
    width: 9.0909090909%;
    padding: 0 0.625rem 1.25rem;
    list-style: none;
  }
  .small-block-grid-12 > li {
    width: 8.3333333333%;
    padding: 0 0.625rem 1.25rem;
    list-style: none;
  }
}

@media only screen and (min-width: 40.063em) {
  .medium-block-grid-1 > li {
    width: 100%;
    padding: 0 0.625rem 1.25rem;
    list-style: none;
  }
  .medium-block-grid-2 > li {
    width: 50%;
    padding: 0 0.625rem 1.25rem;
    list-style: none;
  }
  .medium-block-grid-3 > li {
    width: 33.3333333333%;
    padding: 0 0.625rem 1.25rem;
    list-style: none;
  }
  .medium-block-grid-4 > li {
    width: 25%;
    padding: 0 0.625rem 1.25rem;
    list-style: none;
  }
  .medium-block-grid-5 > li {
    width: 20%;
    padding: 0 0.625rem 1.25rem;
    list-style: none;
  }
  .medium-block-grid-6 > li {
    width: 16.6666666667%;
    padding: 0 0.625rem 1.25rem;
    list-style: none;
  }
  .medium-block-grid-7 > li {
    width: 14.2857142857%;
    padding: 0 0.625rem 1.25rem;
    list-style: none;
  }
  .medium-block-grid-8 > li {
    width: 12.5%;
    padding: 0 0.625rem 1.25rem;
    list-style: none;
  }
  .medium-block-grid-9 > li {
    width: 11.1111111111%;
    padding: 0 0.625rem 1.25rem;
    list-style: none;
  }
  .medium-block-grid-10 > li {
    width: 10%;
    padding: 0 0.625rem 1.25rem;
    list-style: none;
  }
  .medium-block-grid-11 > li {
    width: 9.0909090909%;
    padding: 0 0.625rem 1.25rem;
    list-style: none;
  }
  .medium-block-grid-12 > li {
    width: 8.3333333333%;
    padding: 0 0.625rem 1.25rem;
    list-style: none;
  }
}

@media only screen and (min-width: 64.063em) {
  .large-block-grid-1 > li {
    width: 100%;
    padding: 0 0.625rem 1.25rem;
    list-style: none;
  }
  .large-block-grid-2 > li {
    width: 50%;
    padding: 0 0.625rem 1.25rem;
    list-style: none;
  }
  .large-block-grid-3 > li {
    width: 33.3333333333%;
    padding: 0 0.625rem 1.25rem;
    list-style: none;
  }
  .large-block-grid-4 > li {
    width: 25%;
    padding: 0 0.625rem 1.25rem;
    list-style: none;
  }
  .large-block-grid-5 > li {
    width: 20%;
    padding: 0 0.625rem 1.25rem;
    list-style: none;
  }
  .large-block-grid-6 > li {
    width: 16.6666666667%;
    padding: 0 0.625rem 1.25rem;
    list-style: none;
  }
  .large-block-grid-7 > li {
    width: 14.2857142857%;
    padding: 0 0.625rem 1.25rem;
    list-style: none;
  }
  .large-block-grid-8 > li {
    width: 12.5%;
    padding: 0 0.625rem 1.25rem;
    list-style: none;
  }
  .large-block-grid-9 > li {
    width: 11.1111111111%;
    padding: 0 0.625rem 1.25rem;
    list-style: none;
  }
  .large-block-grid-10 > li {
    width: 10%;
    padding: 0 0.625rem 1.25rem;
    list-style: none;
  }
  .large-block-grid-11 > li {
    width: 9.0909090909%;
    padding: 0 0.625rem 1.25rem;
    list-style: none;
  }
  .large-block-grid-12 > li {
    width: 8.3333333333%;
    padding: 0 0.625rem 1.25rem;
    list-style: none;
  }
}