.symmetrical {
  max-width: 49em;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: .5rem;
  margin-top: .5rem; }
  .symmetrical:after {
    content: " ";
    display: block;
    clear: both; }
  head {
    display: block;
    position: fixed;
    right: 10px;
    top: 10px;
    z-index: 999;
    color: #333;
    background: rgba(255, 255, 255, 0.25); }
  head:before {
    content: "|||";
    display: block;
    padding: 5px 10px;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: bold; }
  head:hover {
    background: rgba(255, 255, 255, 0.5);
    color: red; }
  head:hover ~ .symmetrical, head:hover ~ body .symmetrical {
    position: relative; }
    head:hover ~ .symmetrical:before, head:hover ~ body .symmetrical:before {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      content: " ";
      z-index: 998;
      background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 80%, transparent 80%);
      background-size: 10.20408%;
      background-origin: content-box;
      background-clip: content-box;
      background-position: left top; }
  .symmetrical > .size1of5 {
    min-height: 10rem; }
    .symmetrical > .size1of5:first-of-type {
      width: 18.36735%;
      float: left;
      margin-left: 0; }
    .symmetrical > .size1of5 ~ .size1of5 {
      width: 18.36735%;
      float: right;
      margin-left: 2.04082%; }
  .symmetrical > .size3of5 {
    width: 59.18367%;
    float: left;
    margin-left: 2.04082%; }
    .symmetrical > .size3of5 > .size1of2:first-child {
      width: 48.27586%;
      float: left;
      margin-left: 0; }
    .symmetrical > .size3of5 > .size1of2 + .size1of2 {
      width: 48.27586%;
      float: right;
      margin-left: 3.44828%; }
    .symmetrical > .size3of5 > .full {
      clear: both;
      width: 100%;
      float: left;
      margin-left: 0;
      margin-right: 0;
      background: none; }
  .symmetrical .full .size1of3 {
    width: 31.03448%;
    float: left;
    margin-left: 0;
    min-height: 6.5rem; }
  .symmetrical .full .size2of3 {
    width: 65.51724%;
    float: right;
    margin-left: 3.44828%; }
  .symmetrical .size2of3 .size1of2:first-child {
    width: 47.36842%;
    float: left;
    margin-left: 0; }
  .symmetrical .size2of3 .size1of2 + .size1of2 {
    width: 47.36842%;
    float: right;
    margin-left: 5.26316%; }
  .symmetrical .size2of3 .full {
    clear: both;
    width: 100%;
    float: left;
    margin-left: 0;
    margin-right: 0; }
  .symmetrical .gallery div {
    width: 18.36735%;
    float: left; }
    .symmetrical .gallery div:nth-child(5n + 1) {
      margin-left: 0;
      margin-right: -100%;
      clear: both;
      margin-left: 0; }
    .symmetrical .gallery div:nth-child(5n + 2) {
      margin-left: 20.40816%;
      margin-right: -100%;
      clear: none; }
    .symmetrical .gallery div:nth-child(5n + 3) {
      margin-left: 40.81633%;
      margin-right: -100%;
      clear: none; }
    .symmetrical .gallery div:nth-child(5n + 4) {
      margin-left: 61.22449%;
      margin-right: -100%;
      clear: none; }
    .symmetrical .gallery div:nth-child(5n + 5) {
      margin-left: 81.63265%;
      margin-right: -100%;
      clear: none; }

.asymmetrical {
  max-width: 80%;
  margin-left: 0;
  margin-right: auto;
  margin-bottom: .5rem;
  margin-top: .5rem; }
  .asymmetrical:after {
    content: " ";
    display: block;
    clear: both; }
  head:hover ~ .asymmetrical, head:hover ~ body .asymmetrical {
    position: relative; }
    head:hover ~ .asymmetrical:before, head:hover ~ body .asymmetrical:before {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      content: " ";
      z-index: 998;
      background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 2.08333%, transparent 2.08333%, transparent 4.16667%, rgba(102, 102, 255, 0.25) 4.16667%, rgba(179, 179, 255, 0.25) 12.5%, transparent 12.5%, transparent 14.58333%, rgba(102, 102, 255, 0.25) 14.58333%, rgba(179, 179, 255, 0.25) 19.79167%, transparent 19.79167%, transparent 21.875%, rgba(102, 102, 255, 0.25) 21.875%, rgba(179, 179, 255, 0.25) 26.04167%, transparent 26.04167%, transparent 28.125%, rgba(102, 102, 255, 0.25) 28.125%, rgba(179, 179, 255, 0.25) 41.66667%, transparent 41.66667%, transparent 43.75%, rgba(102, 102, 255, 0.25) 43.75%, rgba(179, 179, 255, 0.25) 51.04167%, transparent 51.04167%, transparent 53.125%, rgba(102, 102, 255, 0.25) 53.125%, rgba(179, 179, 255, 0.25) 65.625%, transparent 65.625%, transparent 67.70833%, rgba(102, 102, 255, 0.25) 67.70833%, rgba(179, 179, 255, 0.25) 76.04167%, transparent 76.04167%, transparent 78.125%, rgba(102, 102, 255, 0.25) 78.125%, rgba(179, 179, 255, 0.25) 82.29167%, transparent 82.29167%, transparent 84.375%, rgba(102, 102, 255, 0.25) 84.375%, rgba(179, 179, 255, 0.25));
      background-origin: content-box;
      background-clip: content-box;
      background-position: left top; }
  .asymmetrical > .size1of5 {
    min-height: 10rem; }
    .asymmetrical > .size1of5:first-of-type {
      width: 12.5%;
      float: left;
      margin-left: 0;
      margin-right: -100%; }
    .asymmetrical > .size1of5 ~ .size1of5 {
      width: 21.875%;
      float: left;
      margin-left: 78.125%;
      margin-right: -100%; }
  .asymmetrical > .size3of5 {
    width: 61.45833%;
    float: left;
    margin-left: 14.58333%;
    margin-right: -100%; }
    .asymmetrical > .size3of5 > .size1of2:first-child {
      width: 44.0678%;
      float: left;
      margin-left: 0;
      margin-right: -100%; }
    .asymmetrical > .size3of5 > .size1of2 + .size1of2 {
      width: 52.54237%;
      float: left;
      margin-left: 47.45763%;
      margin-right: -100%; }
    .asymmetrical > .size3of5 > .full {
      clear: both;
      width: 100%;
      float: left;
      margin-left: 0;
      margin-right: 0;
      background: none; }
  .asymmetrical .full .size1of3 {
    width: 18.64407%;
    float: left;
    margin-left: 0;
    margin-right: -100%;
    min-height: 6.5rem; }
  .asymmetrical .full .size2of3 {
    width: 77.9661%;
    float: left;
    margin-left: 22.0339%;
    margin-right: -100%; }
  .asymmetrical .size2of3 .size1of2:first-child {
    width: 47.82609%;
    float: left;
    margin-left: 0;
    margin-right: -100%; }
  .asymmetrical .size2of3 .size1of2 + .size1of2 {
    width: 47.82609%;
    float: left;
    margin-left: 52.17391%;
    margin-right: -100%; }
  .asymmetrical .size2of3 .full {
    clear: both;
    width: 100%;
    float: left;
    margin-left: 0;
    margin-right: 0; }
  .asymmetrical .gallery div {
    float: left; }
    .asymmetrical .gallery div:nth-child(5n + 1) {
      width: 12.5%;
      margin-left: 0;
      margin-right: -100%;
      clear: both;
      margin-left: 0; }
    .asymmetrical .gallery div:nth-child(5n + 2) {
      width: 11.45833%;
      margin-left: 14.58333%;
      margin-right: -100%;
      clear: none; }
    .asymmetrical .gallery div:nth-child(5n + 3) {
      width: 22.91667%;
      margin-left: 28.125%;
      margin-right: -100%;
      clear: none; }
    .asymmetrical .gallery div:nth-child(5n + 4) {
      width: 22.91667%;
      margin-left: 53.125%;
      margin-right: -100%;
      clear: none; }
    .asymmetrical .gallery div:nth-child(5n + 5) {
      width: 21.875%;
      margin-left: 78.125%;
      margin-right: -100%;
      clear: none; }

.static {
  width: 780px;
  margin-left: auto;
  margin-right: auto;
  background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 75%, transparent 75%);
  background-size: 80px;
  background-origin: content-box;
  background-clip: content-box;
  background-position: left top;
  margin-bottom: .5rem;
  margin-top: .5rem; }
  .static:after {
    content: " ";
    display: block;
    clear: both; }
  .static > .size1of5 {
    min-height: 10rem; }
    .static > .size1of5:first-of-type {
      width: 140px;
      float: left;
      margin-right: 20px; }
    .static > .size1of5 ~ .size1of5 {
      width: 140px;
      float: right;
      margin-right: 0; }
  .static > .size3of5 {
    width: 460.0px;
    float: left;
    margin-right: 20px; }
    .static > .size3of5 > .size1of2:first-child {
      width: 220px;
      float: left;
      margin-right: 20px; }
    .static > .size3of5 > .size1of2 + .size1of2 {
      width: 220px;
      float: right;
      margin-right: 0; }
    .static > .size3of5 > .full {
      clear: both;
      width: 100%;
      float: left;
      margin-left: 0;
      margin-right: 0;
      background: none; }
  .static .full .size1of3 {
    width: 140px;
    float: left;
    margin-right: 20px;
    min-height: 6.5rem; }
  .static .full .size2of3 {
    width: 300px;
    float: right;
    margin-right: 0; }
  .static .size2of3 .size1of2:first-child {
    width: 140px;
    float: left;
    margin-right: 20px; }
  .static .size2of3 .size1of2 + .size1of2 {
    width: 140px;
    float: right;
    margin-right: 0; }
  .static .size2of3 .full {
    clear: both;
    width: 100%;
    float: left;
    margin-left: 0;
    margin-right: 0; }
  .static .gallery div {
    width: 140px;
    float: left; }
    .static .gallery div:nth-child(5n + 1) {
      margin-left: 0;
      margin-right: -100%;
      clear: both;
      margin-left: 0; }
    .static .gallery div:nth-child(5n + 2) {
      margin-left: 160px;
      margin-right: -100%;
      clear: none; }
    .static .gallery div:nth-child(5n + 3) {
      margin-left: 320px;
      margin-right: -100%;
      clear: none; }
    .static .gallery div:nth-child(5n + 4) {
      margin-left: 480px;
      margin-right: -100%;
      clear: none; }
    .static .gallery div:nth-child(5n + 5) {
      margin-left: 640px;
      margin-right: -100%;
      clear: none; }

.split {
  max-width: 60em;
  margin-left: auto;
  margin-right: auto;
  background-image: linear-gradient(to right, transparent 0.78125%, rgba(102, 102, 255, 0.25) 0.78125%, rgba(179, 179, 255, 0.25) 7.03125%, transparent 7.03125%, transparent 8.59375%, rgba(102, 102, 255, 0.25) 8.59375%, rgba(179, 179, 255, 0.25) 11.71875%, transparent 11.71875%, transparent 13.28125%, rgba(102, 102, 255, 0.25) 13.28125%, rgba(179, 179, 255, 0.25) 19.53125%, transparent 19.53125%, transparent 21.09375%, rgba(102, 102, 255, 0.25) 21.09375%, rgba(179, 179, 255, 0.25) 39.84375%, transparent 39.84375%, transparent 41.40625%, rgba(102, 102, 255, 0.25) 41.40625%, rgba(179, 179, 255, 0.25) 47.65625%, transparent 47.65625%, transparent 49.21875%, rgba(102, 102, 255, 0.25) 49.21875%, rgba(179, 179, 255, 0.25) 52.34375%, transparent 52.34375%, transparent 53.90625%, rgba(102, 102, 255, 0.25) 53.90625%, rgba(179, 179, 255, 0.25) 60.15625%, transparent 60.15625%, transparent 61.71875%, rgba(102, 102, 255, 0.25) 61.71875%, rgba(179, 179, 255, 0.25) 64.84375%, transparent 64.84375%, transparent 66.40625%, rgba(102, 102, 255, 0.25) 66.40625%, rgba(179, 179, 255, 0.25) 72.65625%, transparent 72.65625%, transparent 74.21875%, rgba(102, 102, 255, 0.25) 74.21875%, rgba(179, 179, 255, 0.25) 99.21875%, transparent 99.21875%);
  background-origin: content-box;
  background-clip: content-box;
  background-position: left top;
  margin-bottom: .5rem;
  margin-top: .5rem; }
  .split:after {
    content: " ";
    display: block;
    clear: both; }
  .split > .size1of5 {
    min-height: 10rem; }
    .split > .size1of5:first-of-type {
      width: 10.9375%;
      float: left;
      margin-left: 0.78125%;
      margin-right: 0.78125%; }
    .split > .size1of5 ~ .size1of5 {
      width: 32.8125%;
      float: right;
      margin-left: 0.78125%;
      margin-right: 0.78125%; }
  .split > .size3of5 {
    width: 53.125%;
    float: left; }
    .split > .size3of5 > .size1of2:first-child {
      width: 64.70588%;
      float: left;
      margin-left: 1.47059%;
      margin-right: 1.47059%; }
    .split > .size3of5 > .size1of2 + .size1of2 {
      width: 29.41176%;
      float: right;
      margin-left: 1.47059%;
      margin-right: 1.47059%; }
    .split > .size3of5 > .full {
      clear: both;
      width: 100%;
      float: left;
      background: none; }
  .split .full .size1of3 {
    width: 50%;
    float: left;
    margin-left: 1.47059%;
    margin-right: 1.47059%;
    min-height: 6.5rem; }
  .split .full .size2of3 {
    width: 47.05882%;
    float: right; }
  .split .size2of3 .size1of2:first-child {
    width: 43.75%;
    float: left;
    margin-left: 3.125%;
    margin-right: 3.125%; }
  .split .size2of3 .size1of2 + .size1of2 {
    width: 43.75%;
    float: right;
    margin-left: 3.125%;
    margin-right: 3.125%; }
  .split .size2of3 .full {
    clear: both;
    width: 93.75%;
    float: left;
    margin-left: 3.125%;
    margin-right: 3.125%; }
  .split .gallery div {
    float: left; }
    .split .gallery div:nth-child(5n + 1) {
      width: 10.9375%;
      margin-left: 0.78125%;
      margin-right: -100%;
      clear: both; }
    .split .gallery div:nth-child(5n + 2) {
      width: 26.5625%;
      margin-left: 13.28125%;
      margin-right: -100%;
      clear: none; }
    .split .gallery div:nth-child(5n + 3) {
      width: 10.9375%;
      margin-left: 41.40625%;
      margin-right: -100%;
      clear: none; }
    .split .gallery div:nth-child(5n + 4) {
      width: 10.9375%;
      margin-left: 53.90625%;
      margin-right: -100%;
      clear: none; }
    .split .gallery div:nth-child(5n + 5) {
      width: 32.8125%;
      margin-left: 66.40625%;
      margin-right: -100%;
      clear: none; }

.inside {
  max-width: 60em;
  margin-left: auto;
  margin-right: 0;
  background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 7.8125%, rgba(102, 102, 255, 0.25) 7.8125%, rgba(179, 179, 255, 0.25) 12.5%, rgba(102, 102, 255, 0.25) 12.5%, rgba(179, 179, 255, 0.25) 20.3125%, rgba(102, 102, 255, 0.25) 20.3125%, rgba(179, 179, 255, 0.25) 40.625%, rgba(102, 102, 255, 0.25) 40.625%, rgba(179, 179, 255, 0.25) 48.4375%, rgba(102, 102, 255, 0.25) 48.4375%, rgba(179, 179, 255, 0.25) 53.125%, rgba(102, 102, 255, 0.25) 53.125%, rgba(179, 179, 255, 0.25) 60.9375%, rgba(102, 102, 255, 0.25) 60.9375%, rgba(179, 179, 255, 0.25) 65.625%, rgba(102, 102, 255, 0.25) 65.625%, rgba(179, 179, 255, 0.25) 73.4375%, rgba(102, 102, 255, 0.25) 73.4375%, rgba(179, 179, 255, 0.25));
  background-origin: content-box;
  background-clip: content-box;
  background-position: left top;
  margin-bottom: .5rem;
  margin-top: .5rem; }
  .inside:after {
    content: " ";
    display: block;
    clear: both; }
  .inside > .size1of5 {
    min-height: 10rem; }
    .inside > .size1of5:first-of-type {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 12.5%;
      float: left;
      padding-left: 0.78125%;
      padding-right: 0.78125%; }
    .inside > .size1of5 ~ .size1of5 {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 34.375%;
      float: right;
      padding-left: 0.78125%;
      padding-right: 0.78125%; }
  .inside > .size3of5 {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 53.125%;
    float: left; }
    .inside > .size3of5 > .size1of2:first-child {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 67.64706%;
      float: left;
      padding-left: 1.47059%;
      padding-right: 1.47059%; }
    .inside > .size3of5 > .size1of2 + .size1of2 {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 32.35294%;
      float: right;
      padding-left: 1.47059%;
      padding-right: 1.47059%; }
    .inside > .size3of5 > .full {
      clear: both;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 100%;
      float: left;
      background: none; }
  .inside .full .size1of3 {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 52.94118%;
    float: left;
    padding-left: 1.47059%;
    padding-right: 1.47059%;
    min-height: 6.5rem; }
  .inside .full .size2of3 {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 47.05882%;
    float: right; }
  .inside .size2of3 .size1of2:first-child {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 50%;
    float: left;
    padding-left: 3.125%;
    padding-right: 3.125%; }
  .inside .size2of3 .size1of2 + .size1of2 {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 50%;
    float: right;
    padding-left: 3.125%;
    padding-right: 3.125%; }
  .inside .size2of3 .full {
    clear: both;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    float: left;
    padding-left: 3.125%;
    padding-right: 3.125%; }
  .inside .gallery div {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    padding-left: 0.78125%;
    padding-right: 0.78125%; }
    .inside .gallery div:nth-child(5n + 1) {
      width: 12.5%;
      margin-left: 0;
      margin-right: -100%;
      clear: both; }
    .inside .gallery div:nth-child(5n + 2) {
      width: 28.125%;
      margin-left: 12.5%;
      margin-right: -100%;
      clear: none; }
    .inside .gallery div:nth-child(5n + 3) {
      width: 12.5%;
      margin-left: 40.625%;
      margin-right: -100%;
      clear: none; }
    .inside .gallery div:nth-child(5n + 4) {
      width: 12.5%;
      margin-left: 53.125%;
      margin-right: -100%;
      clear: none; }
    .inside .gallery div:nth-child(5n + 5) {
      width: 34.375%;
      margin-left: 65.625%;
      margin-right: -100%;
      clear: none; }

.inside-static {
  max-width: 80em;
  margin-left: auto;
  margin-right: auto;
  background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25));
  background-size: 10%;
  background-origin: content-box;
  background-clip: content-box;
  background-position: left top;
  margin-bottom: .5rem;
  margin-top: .5rem; }
  .inside-static:after {
    content: " ";
    display: block;
    clear: both; }
  .inside-static > .size1of5 {
    min-height: 10rem; }
    .inside-static > .size1of5:first-of-type {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 20%;
      float: left;
      padding-left: 1em;
      padding-right: 1em; }
    .inside-static > .size1of5 ~ .size1of5 {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 20%;
      float: right;
      padding-left: 1em;
      padding-right: 1em; }
  .inside-static > .size3of5 {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 60.0%;
    float: left; }
    .inside-static > .size3of5 > .size1of2:first-child {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 50%;
      float: left;
      padding-left: 1em;
      padding-right: 1em; }
    .inside-static > .size3of5 > .size1of2 + .size1of2 {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 50%;
      float: right;
      padding-left: 1em;
      padding-right: 1em; }
    .inside-static > .size3of5 > .full {
      clear: both;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 100%;
      float: left;
      background: none; }
  .inside-static .full .size1of3 {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 33.33333%;
    float: left;
    padding-left: 1em;
    padding-right: 1em;
    min-height: 6.5rem; }
  .inside-static .full .size2of3 {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 66.66667%;
    float: right; }
  .inside-static .size2of3 .size1of2:first-child {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 50%;
    float: left;
    padding-left: 1em;
    padding-right: 1em; }
  .inside-static .size2of3 .size1of2 + .size1of2 {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 50%;
    float: right;
    padding-left: 1em;
    padding-right: 1em; }
  .inside-static .size2of3 .full {
    clear: both;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    float: left;
    padding-left: 1em;
    padding-right: 1em; }
  .inside-static .gallery div {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 20%;
    float: left;
    padding-left: 1em;
    padding-right: 1em; }
    .inside-static .gallery div:nth-child(5n + 1) {
      margin-left: 0;
      margin-right: -100%;
      clear: both; }
    .inside-static .gallery div:nth-child(5n + 2) {
      margin-left: 20%;
      margin-right: -100%;
      clear: none; }
    .inside-static .gallery div:nth-child(5n + 3) {
      margin-left: 40%;
      margin-right: -100%;
      clear: none; }
    .inside-static .gallery div:nth-child(5n + 4) {
      margin-left: 60.0%;
      margin-right: -100%;
      clear: none; }
    .inside-static .gallery div:nth-child(5n + 5) {
      margin-left: 80%;
      margin-right: -100%;
      clear: none; }

html {
  font-size: 16px;
  line-height: 1rem; }

body {
  font-size: .75rem;
  font-family: sans-serif; }

h1 {
  background: #333;
  color: #eee; }

h1, h2, h3 {
  clear: both;
  font-size: .75rem;
  font-weight: bold;
  line-height: 1rem;
  margin: 0;
  padding: .5rem; }

.grid-element {
  margin-bottom: .5rem;
  min-height: 3rem;
  opacity: .5; }

.size1of2 {
  background: #f99; }

.size1of5 {
  background: #aef; }

.size1of3 {
  background: orange; }

.full.grid-element {
  background: pink; }

.gallery {
  clear: both; }
  .gallery:after {
    content: " ";
    display: block;
    clear: both; }
  .gallery div {
    background: rgba(255, 0, 0, 0.25);
    height: 1rem;
    margin-bottom: .5rem;
    outline: 1px dotted red; }
