/* grid
------------------------- */

.grid {
  position: relative;
  display: block;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* grid-item
------------------------- */

.grid-item {
  float: left;
  width: 20%;
  height: 260px;
  overflow: hidden;
}

.grid-item--width2 { width: 40%; }
.grid-item--height2 { height: 260px; }

.grid-item--width3 { width: 180px; }
.grid-item--height3 { height: 180px; }

.grid-item--large {
  width: 180px;
  height: 180px;
  background: #0C9;
  z-index: 2;
}

.grid--clickable .grid-item:hover {
  background: #C90;
  cursor: pointer;
}


/* ---- fluid-5-col ---- */

.grid--fluid-5-col .grid-item,
.grid--fluid-5-col .grid-sizer { width: 20%; }

.grid--fluid-5-col .grid-item--width2 { width: 40%; }

/* ---- grid-sizer--row-height ---- */

.grid-sizer--row-height { height: 60px; }

/* ---- grid--has-gutter ---- */

.grid--has-gutter .grid-item--width2 {
  width: 130px;
}

.grid--has-gutter .grid-item--height2 {
  height: 130px;
}

/* ---- grid--fluid-gutter ---- */

.grid--fluid-gutter .grid-sizer,
.grid--fluid-gutter .grid-item {
  width: 22%;
}

.grid--fluid-gutter .gutter-sizer {
  width: 4%;
}

.grid--fluid-gutter .grid-item--width2 {
  width: 48%;
}

/* ----  ---- */

.grid--order-after-drag .grid-item {
  padding: 10px;
  color: #F8F8F8;
  font-size: 1.2rem;
}

/* ---- masonry-horizontal ---- */

.grid--masonry-horizontal-gutter .grid-item--height2 {
  height: 110px;
}

/* ----  ---- */

.grid--masonry-horizontal-gutter-right .grid-item {
  margin-right: 10px;
}

.grid--masonry-horizontal-gutter-right .grid-item--width2 {
  width: 110px;
}

/* ---- cells-by-row-element-sizing ---- */

.grid--cells-by-row-element-sizing .grid-item {
  width: 13%;
}

.grid--cells-by-row-element-sizing .grid-item--width2 {
  width: 23%;
}

.grid--cells-by-row-element-sizing .grid-sizer {
  width: 25%;
  height: 110px;
}

/* ---- cells-by-column-element-sizing ---- */

.grid--cells-by-column-element-sizing .grid-item {
  height: 13%;
}

.grid--cells-by-column-element-sizing .grid-item--width2 {
  height: 23%;
}

.grid--cells-by-column-element-sizing .grid-sizer {
  height: 25%;
  width: 110px;
}

/* ---- fitrows-gutter ---- */

.grid--fit-rows-gutter .grid-item--width2 { width: 110px; }
.grid--fit-rows-gutter .grid-item--width3 { width: 170px; }