moonleerecords/moonlee-website

// Items container and columns
.items-list {
  clear: both;
  margin: 0;

  .item-column {
    display: block;
    float: left;
    margin: 0 0 0 1.8%;
    min-height: 1px;
    position: relative;

    &:first-of-type {
      margin-left: 0;
    }

    &.marginless {
      margin: 0;
    }
  }
}

// Grouping
.items-list-group:before,
.items-list-group:after {
  content: '';
  display: table;
}

.items-list-group:after {
  clear: both;
}

.group {
  zoom: 1; // For IE 6/7
}

// Grids (they work with .item-column)
.column-3-3 {
  width: 100%;
}

.column-2-3 {
  width: 66.06%;
}

.column-1-3 {
  width: 32.13%;

  &:nth-of-type(3n+1) {
    clear: left;
    margin-left: 0;
  }
}

.column-1-2 {
  margin: 0;
  width: 50%;
}

.column-9-9 {
  width: 100%;
}

.column-8-9 {
  width: 88.68%;
}

.column-7-9 {
  width: 77.37%;
}

.column-6-9 {
  box-sizing: border-box;
  padding-right: 50px;
  width: 66.06%;
}

.column-5-9 {
  width: 54.75%;
}

.column-4-9 {
  width: 43.44%;
}

.column-3-9 {
  width: 32.13%;
}

.column-2-9 {
  width: 20.82%;
}

.column-1-9 {
  width: 9.511%;
}

.column-12-12 {
  width: 100%;
}

.column-11-12 {
  width: 91.51%;
}

.column-10-12 {
  width: 83.03%;
}

.column-9-12 {
  width: 74.55%;
}

.column-8-12 {
  width: 66.06%;
}

.column-7-12 {
  width: 57.58%;
}

.column-6-12 {
  width: 49.1%;
}

.column-5-12 {
  width: 40.61%;
}

.column-4-12 {
  width: 32.13%;
}

.column-3-12 {
  width: 23.65%;
}

.column-2-12 {
  width: 15.16%;
}

.column-1-12 {
  width: 6.683%;
}

@include respond-to(small) {
  .items-list {
    .item-column {
      margin: 1% 0 5%;
    }
  }

  .column-1-2 {
    padding: 0;
    width: 100%;
  }

  .column-3-3,
  .column-2-3,
  .column-1-3 {
    padding: 0;
    width: 100%;
  }

  .column-9-9,
  .column-8-9,
  .column-7-9,
  .column-6-9,
  .column-5-9,
  .column-4-9,
  .column-3-9,
  .column-2-9,
  .column-1-9 {
    padding: 0;
    width: 100%;
  }

  .column-12-12,
  .column-11-12,
  .column-10-12,
  .column-9-12,
  .column-8-12,
  .column-7-12,
  .column-6-12,
  .column-5-12,
  .column-4-12,
  .column-3-12,
  .column-2-12,
  .column-1-12 {
    padding: 0;
    width: 100%;
  }
}