*, *::after, *::before {
  -webkit-box-sizing: border-box !important;
  -moz-box-sizing: border-box !important;
  box-sizing: border-box !important;
  border: 0;
  margin: 0;
  padding: 0; }

.grid, .gridItem {
  width: 100%;
  float: left; }

.grid.reversed > .grid, .grid.reversed > .gridItem {
  float: right; }

.grid.padded {
  padding-right: 1rem; }
  .grid.padded:first-of-type {
    padding-top: 1rem; }
  .grid.padded .gridItem {
    padding-left: 1rem;
    margin-bottom: 1rem; }

@media only screen and (max-width: 799px) {
  .mobile-1-4 {
    width: 25%; }

  .mobile-1-3 {
    width: 33.33%; }

  .mobile-1-2 {
    width: 50%; }

  .mobile-2-3 {
    width: 66.67%; }

  .mobile-3-4 {
    width: 75%; }

  .mobile-1-1 {
    width: 100%; }
 }

@media only screen and (min-width: 800px) and (max-width: 1199px) {
  .tablet-1-4 {
    width: 25%; }

  .tablet-1-3 {
    width: 33.33%; }

  .tablet-1-2 {
    width: 50%; }

  .tablet-2-3 {
    width: 66.67%; }

  .tablet-3-4 {
    width: 75%; }

  .tablet-1-1 {
    width: 100%; }
 }

@media only screen and (min-width: 1200px) {
  .desktop-1-4 {
    width: 25%; }

  .desktop-1-3 {
    width: 33.33%; }

  .desktop-1-2 {
    width: 50%; }

  .desktop-2-3 {
    width: 66.67%; }

  .desktop-3-4 {
    width: 75%; }

  .desktop-1-1 {
    width: 100%; }
 }