/**
 * Column widths
 */
.half-width,
.third-width,
.quarter-width,
.quarter-half-width {
  width: 100%;
  box-sizing: border-box;
}

@media all and (min-width: 480px) {
  .half-width,
  .third-width,
  .quarter-width,
  .quarter-half-width {
    width: 50%;
    float: left;
  }

  /* Max-width items */
  .max-width-33 {
    max-width: 33%;
  }
  .max-width-40 {
    max-width: 40%;
  }
  .max-width-50 {
    max-width: 50%;
  }
  .max-width-60 {
    max-width: 60%;
  }
}
@media (min-width: 640px) {
  .third-width,
  .quarter-width {
    width: 33.33333%;
  }
}

@media (min-width: 800px) {
  .quarter-half-width {
    width: 25%;
  }
}

@media (min-width: 930px) {
  .quarter-width {
    width: 25%;
  }
}

/******************************************************************************************************************************//*
* Responsive grid items
********************************************************************************************************************************/

.grid-item,
.views-row-grid {
  padding: 1em 0;
  box-sizing: border-box;
}
.grid-item.three,
.views-row-grid.three {
  box-sizing: border-box;
}

@media (min-width: 400px) {
  .grid-item,
  .views-row-grid {
    width: 50%;
    float: left;
    padding-left: 2%;
    padding-right: 2%;
  }
  .grid-item.three,
  .views-row-grid.three {
    width: 50%;
    float: left;
    padding: 1em;
  }
}
@media (min-width: 640px) {
  .grid-item,
  .views-row-grid {
    width: 33.33333%;
  }
  .grid-item.three,
  .views-row-grid.three {
    width: 33.33333%;
  }
  .grid-item.three.views-row:nth-child(3n+1),
  .views-row-grid.three:nth-child(3n+1) {
    clear: both;
  }
}

@media (min-width: 800px) {
  .no-sidebars .grid-item,
  .no-sidebars .views-row-grid {
    width: 25%;
  }
}
@media (min-width: 1320px) {
  .two-sidebars .grid-item,
  .two-sidebars .views-row-grid {
    width: 33.33333%;
  }
  .one-sidebar .grid-item,
  .one-sidebar .views-row-grid {
    width: 25%;
  }
  .no-sidebars .grid-item, .no-sidebars
  .views-row-grid {
    width: 20%;
  }
  .grid-item.four,
  .views-row-grid.four {
    box-sizing: border-box;
    width: 25%;
    float: left;
  }
  .grid-item.four.views-row-5, .grid-item.four.views-row-9,
  .views-row-grid.four.views-row-5,
  .views-row-grid.four.views-row-9 {
    clear: both;
  }
}