* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

html {
  font-family: 'Futura W01', helvetica, san-serif;
  line-height: 1.3;
  font-size: 100%;
  color: #3C3C3B;
  font-weight: 300;
  background: white; }

body {
  margin: 0; }

img {
  display: block; }

ul, li {
  margin: 0;
  padding: 0;
  list-style: none; }

a {
  color: black;
  text-decoration: none; }

.index main {
  margin: 3rem; }

.index ul {
  margin: 2rem auto;
  padding: 0;
  list-style: none; }

.index li {
  max-width: 300px;
  margin-bottom: 20px; }

.index img {
  width: 100%;
  -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
          box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
  border: 1px solid #aaa; }

.index .original img {
  margin-top: 10px; }

.index a {
  display: block; }

@supports (display: grid) {
  .index ul {
    /* autoprefixer: off */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    grid-gap: 2rem;
    width: auto; }
  .index li {
    width: auto;
    margin: 0; } }

.A main {
  width: 70%;
  margin: 10vw auto; }

.A img {
  height: auto;
  width: auto;
  border: 6px solid black; }

.A li {
  margin: 1em 0; }

.B img, .C img, .D img, .E img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover; }

.B ul, .C ul, .D ul, .E ul {
  background: #1C1B1B;
  -webkit-clip-path: polygon(10px 6px, calc(100% - 7px) 6px, calc(100% - 7px) calc(100% - 6px), 10px calc(100% - 6px));
  clip-path: polygon(10px 6px, calc(100% - 7px) 6px, calc(100% - 7px) calc(100% - 6px), 10px calc(100% - 6px)); }

.B li, .C li, .D li, .E li {
  border: 6px solid black; }

.B {
  margin: -8px -8px -8px -10px;
  overflow: hidden; }
  .B ul {
    /* autoprefixer: off */
    display: grid;
    grid-template-columns: repeat(5, 1fr) 1.2fr 1.2fr 0.5fr;
    grid-template-rows: 11vw repeat(5, 13vw) 11vw 6.5vw 6.5vw; }

.C {
  margin: 0 100px; }
  .C main {
    margin: 4vw auto; }
  .C main {
    max-width: 940px; }
  .C ul {
    /* autoprefixer: off */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    grid-auto-rows: 80px;
    grid-auto-flow: dense; }

.D main {
  width: 80%;
  margin: 4vw auto; }

.D ul {
  /* autoprefixer: off */
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(1, calc(80vw/1));
  grid-template-rows: repeat(1, calc(80vw/1));
  max-width: 880px;
  margin: 0 auto; }

@media (min-width: 300px) {
  .D ul {
    /* autoprefixer: off */
    grid-template-columns: repeat(2, calc(80vw/2));
    grid-template-rows: repeat(2, calc(80vw/2)); } }

@media (min-width: 400px) {
  .D ul {
    /* autoprefixer: off */
    grid-template-columns: repeat(3, calc(80vw/3));
    grid-template-rows: repeat(3, calc(80vw/3)); } }

@media (min-width: 500px) {
  .D ul {
    /* autoprefixer: off */
    grid-template-columns: repeat(4, calc(80vw/4));
    grid-template-rows: repeat(4, calc(80vw/4)); } }

@media (min-width: 600px) {
  .D ul {
    /* autoprefixer: off */
    grid-template-columns: repeat(5, calc(80vw/5));
    grid-template-rows: repeat(5, calc(80vw/5)); } }

@media (min-width: 700px) {
  .D ul {
    /* autoprefixer: off */
    grid-template-columns: repeat(6, calc(80vw/6));
    grid-template-rows: repeat(6, calc(80vw/6)); } }

@media (min-width: 800px) {
  .D ul {
    /* autoprefixer: off */
    grid-template-columns: repeat(7, calc(80vw/7));
    grid-template-rows: repeat(7, calc(80vw/7)); } }

@media (min-width: 900px) {
  .D ul {
    /* autoprefixer: off */
    grid-template-columns: repeat(8, calc(80vw/8));
    grid-template-rows: repeat(8, calc(80vw/8)); } }

@media (min-width: 1000px) {
  .D ul {
    /* autoprefixer: off */
    grid-template-columns: repeat(9, calc(80vw/9));
    grid-template-rows: repeat(9, calc(80vw/9)); } }

@media (min-width: 1100px) {
  .D ul {
    /* autoprefixer: off */
    grid-template-columns: repeat(9, calc(880px/9));
    grid-template-rows: repeat(9, calc(880px/9)); } }

.E {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100vh; }
  .E main {
    width: calc(90vw - 12px);
    margin: 10px auto;
    -webkit-clip-path: polygon(50% 2%, 98% 50%, 50% 98%, 2% 50%);
            clip-path: polygon(50% 2%, 98% 50%, 50% 98%, 2% 50%); }
  .E ul {
    /* autoprefixer: off */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-auto-rows: 80px;
    grid-auto-flow: dense;
    height: calc(90vw + 12px);
    width: calc(90vw + 12px);
    margin: -6px 0 0 -6px; }
  @media (min-width: 880px) {
    .E main, .E ul {
      width: 800px;
      height: 800px; } }

.block-sizes li:nth-child(1) {
  /* autoprefixer: off */
  grid-column: span 2; }

.block-sizes li:nth-child(2) {
  /* autoprefixer: off */
  grid-column: span 3; }

.block-sizes li:nth-child(3) {
  /* autoprefixer: off */
  grid-column: span 2; }

.block-sizes li:nth-child(4) {
  /* autoprefixer: off */
  grid-row: span 6; }

.block-sizes li:nth-child(5) {
  /* autoprefixer: off */
  grid-row: span 2; }

.block-sizes li:nth-child(6) {
  /* autoprefixer: off */
  grid-column: span 4;
  grid-row: span 4; }

.block-sizes li:nth-child(7) {
  /* autoprefixer: off */
  grid-row: span 2;
  grid-column: span 2; }

.block-sizes li:nth-child(8) {
  /* autoprefixer: off */
  grid-row: span 3; }

.block-sizes li:nth-child(9) {
  /* autoprefixer: off */
  grid-row: span 2; }

.block-sizes li:nth-child(10) {
  /* autoprefixer: off */
  grid-row: span 2; }

.block-sizes li:nth-child(11) {
  /* autoprefixer: off */
  grid-row: span 2;
  grid-column: span 2; }

.block-sizes li:nth-child(12) {
  /* autoprefixer: off */
  grid-column: span 2; }

.block-sizes li:nth-child(13) {
  /* autoprefixer: off */
  grid-column: span 2; }

.block-sizes li:nth-child(14) {
  /* autoprefixer: off */
  grid-row: span 3; }

.block-sizes li:nth-child(15) {
  /* autoprefixer: off */
  grid-column: span 2; }

.block-sizes li:nth-child(16) {
  /* autoprefixer: off */
  grid-row: span 2;
  grid-column: span 2; }

.block-sizes li:nth-child(17) {
  /* autoprefixer: off */
  grid-row: span 3; }

.block-sizes li:nth-child(18) {
  /* autoprefixer: off */
  grid-column: span 2;
  grid-row: span 2; }

.block-sizes li:nth-child(19) {
  /* autoprefixer: off */
  grid-column: span 2; }

.block-sizes li:nth-child(20) {
  /* autoprefixer: off */
  grid-column: span 4; }
/*# sourceMappingURL=01-011.css.map */