.frame {
margin: 0 auto;
max-width: 100%;
}

.frame:after {
content: "";
display: table;
clear: both;
}

[class*='bit-'] {
float: left;
padding: 0.3em;
}

.wrapper {
  width:1232px;
  max-width:100%;
  display: block;
  margin:0 auto;
  float:none;
}

.wrapper-wide {
  width:1600px;
  max-width:100%;
  display:block;
  margin:0 auto;
  float:none;
}

.wrapper-ultra-wide {
  width:1800px;
  max-width:100%;
  display:block;
  margin:0 auto;
  float:none;
}

.bit-1 {
width: 100%;
}

.bit-2 {
width: 50%;
}

.bit-3 {
width: 33.33333%;
}

.bit-4 {
width: 25%;
}

.bit-5 {
width: 20%;
}

.bit-6 {
width: 16.66667%;
}

.bit-7 {
width: 14.28571%;
}

.bit-8 {
width: 12.5%;
}

.bit-9 {
width: 11.11111%;
}

.bit-10 {
width: 10%;
}

.bit-11 {
width: 9.09091%;
}

.bit-12 {
width: 8.33333%;
}

.bit-25 {
width: 25%;
}

.bit-40 {
width: 40%;
}

.bit-60 {
width: 60%;
}

.bit-66 {
width: 66%;
}

.bit-75 {
width: 75%;
}

@media (max-width: 30em) {
.bit-1 {
  width: 100%;
}
.bit-2 {
  width: 100%;
}
.bit-3 {
  width: 100%;
}
.bit-4 {
  width: 100%;
}
.bit-5 {
  width: 100%;
}
.bit-6 {
  width: 100%;
}
.bit-60 {
  width:100%;
}
.bit-66 {
  width:100%;
}
.bit-7 {
  width: 100%;
}
.bit-8 {
  width: 100%;
}
.bit-9 {
  width: 100%;
}
.bit-10 {
  width: 100%;
}
.bit-11 {
  width: 100%;
}
.bit-12 {
  width: 100%;
}
}

@media (min-width: 30em) and (max-width: 50em) {
.bit-4,
.bit-6,
.bit-8,
.bit-10,
.bit-12 {
  width: 50%;
}
.bit-1,
.bit-2,
.bit-3,
.bit-5,
.bit-7,
.bit-9,
.bit-11,
.bit-60,
.bit-66 {
  width: 100%;
}
}

@media (min-width: 50em) and (max-width: 68.75em) {
.bit-2,
.bit-7 {
  width: 100%;
}
.bit-4,
.bit-8,
.bit-10,
.bit-12 {
  width: 50%;
}
}