<section class="container">
  <section class="poster">
    <div class="block-1-6 gray skew-bottom-left"></div>
    <div class="block-1-6 lines horizontal skew-left-down"></div>
    <div class="block-1-7 light"></div>
    <div class="block-2-2 flag skew-left-down"></div>
    <div class="block-2-3 flag"></div>
    <div class="block-2-5 tiles2 skew-bottom-left">
      <div class="block-1-1"></div>
      <div class="block-1-2"></div>
      <div class="block-1-3"></div>
      <div class="block-2-1"></div>
      <div class="block-2-2"></div>
      <div class="block-2-3"></div>
      <div class="block-3-1"></div>
      <div class="block-3-2"></div>
      <div class="block-3-3"></div>
      <section class="line line-1"></section>
      <section class="line line-2"></section>
      <section class="line line-3"></section>
      <section class="line line-4 reverse"></section>
      <section class="line line-5 reverse"></section>
      <section class="line line-6 reverse"></section>
    </div>
    <div class="block-2-5 black skew-left-down"></div>
    <div class="block-2-7 flag-2 skew-bottom-left"></div>
    <div class="block-3-3 light skew-left-down"></div>
    <div class="block-3-4 gray"></div>
    <div class="block-3-5 lines horizontal skew-left-down"></div>
    <div class="block-3-6 wedges">
      <div class="block-lt"></div>
      <div class="block-mt"></div>
      <div class="block-rt"></div>
      <div class="block-lm"></div>
      <div class="block-mm"></div>
      <div class="block-rm"></div>
      <div class="block-lb"></div>
      <div class="block-mb"></div>
      <div class="block-rb"></div>
    </div>
    <div class="block-3-7 gray"></div>
    <div class="block-4-2 gray"></div>
    <div class="block-4-3 light skew-left-down"></div>
    <div class="block-4-4 black"></div>
    <div class="block-4-6 black skew-bottom-left"></div>
    <div class="block-4-7 black skew-left-down"></div>
    <div class="block-4-7 lines vertical skew-bottom-left"></div>
    <div class="block-5-1 black squares skew-left-down">
      <div class="block-1-2 large"></div>
      <div class="block-1-3 small"></div>
      <div class="block-1-5 large"></div>
      <div class="block-1-6 small"></div>
      <div class="block-1-8 large"></div>
      <div class="block-2-1 small"></div>
      <div class="block-2-3 large"></div>
      <div class="block-2-4 small"></div>
      <div class="block-2-6 large"></div>
      <div class="block-2-7 small"></div>
      <div class="block-3-1 large"></div>
      <div class="block-3-2 small"></div>
      <div class="block-3-4 large"></div>
      <div class="block-3-5 small"></div>
      <div class="block-3-7 large"></div>
      <div class="block-3-8 small"></div>
      <div class="block-4-2 large"></div>
      <div class="block-4-3 small"></div>
      <div class="block-4-5 large"></div>
      <div class="block-4-6 small"></div>
      <div class="block-4-8 large"></div>
      <div class="block-5-1 small"></div>
      <div class="block-5-3 large"></div>
      <div class="block-5-4 small"></div>
      <div class="block-5-6 large"></div>
      <div class="block-5-7 small"></div>
      <div class="block-6-1 large"></div>
      <div class="block-6-2 small"></div>
      <div class="block-6-4 large"></div>
      <div class="block-6-5 small"></div>
      <div class="block-6-7 large"></div>
      <div class="block-6-8 small"></div>
      <div class="block-7-2 large"></div>
      <div class="block-7-3 small"></div>
      <div class="block-7-5 large"></div>
      <div class="block-7-6 small"></div>
      <div class="block-7-8 large"></div>
      <div class="block-8-1 small"></div>
      <div class="block-8-3 large"></div>
      <div class="block-8-4 small"></div>
      <div class="block-8-6 large"></div>
      <div class="block-8-7 small"></div>
    </div>
    <div class="block-5-2 dots"></div>
    <div class="block-5-4 lines vertical skew-bottom-left"></div>
    <div class="block-5-5 gray"></div>
    <div class="block-5-6 colored-blocks"></div>
    <div class="block-6-2 lines vertical skew-bottom-left"></div>
    <div class="block-6-2 light skew-left-down"></div>
    <div class="block-6-3 cross"></div>
    <div class="block-5-4 lines dark skew-left-down"></div>
    <div class="block-6-5 black skew-left-down"></div>
    <div class="block-6-5 light skew-bottom-left"></div>
    <div class="block-7-2 black skew-left-down"></div>
    <div class="block-7-3 gray"></div>
    <div class="block-7-4 sun"></div>
    <div class="block-7-5 gray skew-left-down"></div>
    <div class="block-8-3 flag-4 skew-left-down"></div>
    <div class="block-8-3 tiles skew-bottom-left"></div>
    <div class="block-8-4 lines lines-45"></div>
    <div class="block-9-4 flag-3 skew-bottom-left"></div>
    <div class="block-9-2 gray"></div>
  </section>
</section>

:root {
  --col-width: 4.25rem;
  --row-height: 4.75rem;
  --color-bg: #e3e3e3; 
  --color-1: #101010;
  --color-2: #999999;
  --color-3: #d2d2d2;
}

@mixin gridColumns($count: 1, $width: 'none') {
  @if $width == 'none' {
    $width: percentage(1 / $count);
  }
  $columns: $width;
  @for $i from 0 to $count {
    $columns: append($columns, $width, 'space');
  }
  grid-template-columns: $columns;
}

@mixin gridRows($count: 1, $height: 'none') {
  @if $height == 'none' {
    $height: percentage(1 / $count);
  }
  $rows: $height;
  @for $i from 0 to $count {
    $rows: append($rows, $height, 'space');
  }
  grid-template-rows: $rows;
}

@mixin multiline($deg: 180deg) {
  background-image: linear-gradient(
    $deg,
    var(--color-1) 33.33%,
    var(--color-2) 33.33%, 
    var(--color-2) 66.66%, 
    var(--color-bg) 66.66%
  );  
}

@mixin stripes($deg, $lines: true, $col1: transparent, $col2: var(--color-2)) {
  $background: $deg;
  @for $i from 0 to 20 {
    $perc1: percentage((5 * $i) / 100);
    $perc2: percentage(((5 * $i) + 2.5) / 100);
    @if $lines {
      $perc2: percentage(((5 * $i) + 1) / 100);
    }

    $background: append($background , #{$col1 $perc1}, 'comma');
    $background: append($background , #{$col2 $perc1}, 'comma');
    $background: append($background , #{$col2 $perc2}, 'comma');
    $background: append($background , #{$col1  $perc2}, 'comma');
  }
  
  background-image: linear-gradient($background);
}

@mixin sun($reversed: false, $size: 14) {
  $sun: ();
  @for $i from 0 to $size {
    $step: -180 / $size;
    $color: if($reversed, var(--color-2), var(--color-1));
    @if $i % 2 == 0 {
      $color: var(--color-bg);
    }
    @if $i % 4 == 3 {
      $color: if($reversed, var(--color-1), var(--color-2));
    }
    $sun: join($sun, linear-gradient(#{$step * $i}deg, #{$color} 49.95%, transparent 50.05%, transparent 0), comma);
  }
  
  background-image: $sun;
}

$multiline: 
  linear-gradient(
    180deg,
    var(--color-1) 33.33%,
    var(--color-2) 33.33%, 
    var(--color-2) 66.66%, 
    var(--color-bg) 66.66%
  );

body {
  background-color: white;
}

.container {
  background-color: var(--color-bg);
  box-shadow: 0 0 2rem -.5rem rgba(0, 0, 0, .9);
  margin: 3rem auto;
  padding: 2rem;
  width: 30rem;
}

.poster {
  display: grid;
  @include gridColumns(7, var(--col-width));
  @include gridRows(9, var(--row-height));
  transform: skewY(30deg) translateY(-7rem);
  transform-origin: top left;
  position: relative;
}

.light { background-color: var(--color-3); }
.gray { background-color: var(--color-2); }
.black { background-color: var(--color-1); }

.cross {
  background-color: var(--color-2);
  background-image: linear-gradient(
    48deg, 
    transparent 45%, 
    var(--color-1) 45%, 
    var(--color-1) 55%,
    transparent 55%), 
  linear-gradient(
    -48deg, 
    transparent 45%, 
    var(--color-1) 45%, 
    var(--color-1) 55%,
    transparent 55%);
  border: .5rem solid var(--color-1);
}

.flag {
  background-image: linear-gradient(
    0deg, 
    var(--color-1) 33.3%, 
    transparent 33.3%, 
    transparent 66.6%,
    var(--color-2) 66.6%)
}

.flag-2 {
  @include multiline();
  background-size: 100% 43%
}

.flag-3 {
  @include multiline(180deg);
  background-size: 100% 16%;
  background-position: center;
}

.flag-4 {
  @include multiline(270deg);
  background-size: 16.5% 100%;
  background-position: center;
}

.tiles {
  background-image: 
    linear-gradient(0deg, transparent 40%, var(--color-bg) 40%, var(--color-bg) 60%, transparent 60%),
    linear-gradient(90deg, transparent 40%, var(--color-bg) 40%, var(--color-bg) 60%, transparent 60%),
    radial-gradient(circle, var(--color-1) 72%, var(--color-bg) 75%);
  background-size: 25% 25%;
}

.tiles2 {
  display: grid;
  @include gridColumns(8);
  @include gridRows(8);
  overflow: hidden;
  
  div {
    background-image: 
      linear-gradient(90deg, var(--color-1) 66.666%, var(--color-bg) 66.666%),
      linear-gradient(90deg, var(--color-1) 33.333%, var(--color-bg) 33.333%, var(--color-bg) 66.666%, var(--color-1) 66.666%),
      linear-gradient(90deg, var(--color-bg) 33.333%, var(--color-1) 33.333%)
      ;
    background-position: bottom 1.18750rem left,  bottom 0.59375rem left, bottom left;
    background-repeat: no-repeat;
  }
  .block-1-1 { grid-area: 1/1/3/4; }
  .block-1-2 { grid-area: 3/1/6/4; }
  .block-1-3 { grid-area: 6/1/9/4; }
  .block-2-1 { grid-area: 1/4/3/7; }
  .block-2-2 { grid-area: 3/4/6/7; }
  .block-2-3 { grid-area: 6/4/9/7; }
  .block-3-1 { 
    grid-area: 1/7/3/9; 
    background-size: 150% 100%;
  }
  .block-3-2 { 
    grid-area: 3/7/6/9; 
    background-size: 150% 100%;
  }
  .block-3-3 { 
    grid-area: 6/7/9/9; 
    background-size: 150% 100%;
  }
  .line-1 { grid-area: 1/2/9/2; }
  .line-2 { grid-area: 1/5/9/5; }
  .line-3 { grid-area: 1/8/9/8; }
  .line-4 { grid-area: 1/1/9/1; }
  .line-5 { grid-area: 1/4/9/4; }
  .line-6 { grid-area: 1/7/9/7; }
  .line {
    background-color: var(--color-bg);
    transform: skewX(-41deg) translateX(1px);
    transform-origin: bottom left;
    z-index: 1;    
  }
  .reverse {
    transform: skewX(-41deg) translateX(-1px);
    transform-origin: top right;    
  }
}

.squares {
  display: grid;
  @include gridColumns(8);
  @include gridRows(8);
  padding: .125rem;
  
  .large {
    border: 1px solid var(--color-bg);
  }

  .small {
    box-shadow: 
      0 0 0 .125rem var(--color-1) inset,
      0 0 0 .2rem var(--color-bg) inset;
  }
}

.dots {
  background-image:
    radial-gradient(circle at 25% 25%, var(--color-1) 20%, transparent 23%),
    radial-gradient(circle at 75% 75%, var(--color-1) 20%, transparent 23%);
  background-size: 10% 10%;
}

.sun {
  @include sun();
  position: relative;
  
  &::after {
    @include sun(true);
    background-size: 100% 200%;
    content: '';
    display: block;
    height: 50%;
    top: 50%;
    width: 100%;
    transform: rotate(180deg);
    position: absolute;
  }
}

.wedges {
  display: grid;
  @include gridColumns(4);
  @include gridRows(4);
  padding: .25rem;
  
  .block-lt {
    grid-area: 1/1/2/2;
    background: var(--color-1);
    border-radius: 4.75rem 0 0;
  }
  .block-mt {
    grid-area: 1/2/2/3;
    background: var(--color-1);
    border-radius: 4.75rem 0 0;
    transform: rotate(45deg);
    transform-origin: bottom right;
  }
  .block-rt {
    grid-area: 1/4/2/5;
    background: var(--color-1);
    border-radius: 0 4.75rem 0 0;
  }
  .block-lm {
    grid-area: 2/1/3/2;
    background: var(--color-1);
    border-radius: 4.75rem 0 0;
    transform: rotate(-45deg);
    transform-origin: bottom right;
  }
  .block-lb {
    grid-area: 4/1/5/2;
    background: var(--color-1);
    border-radius: 0 0 0 4.75rem;
  }
  .block-mb {
    grid-area: 4/2/5/3;
    background: var(--color-1);
    border-radius: 0  0  0 4.75rem;
    transform: rotate(-45deg);
    transform-origin: top right;
  }
  .block-rb {
    grid-area: 4/4/5/5;
    background: var(--color-1);
    border-radius: 0 0 4.75rem 0;
  }
  .block-rm {
    grid-area: 2/4/3/5;
    background: var(--color-1);
    border-radius: 0 4.75rem 0 0;
    transform: rotate(45deg);
    transform-origin: bottom left;
  }

  .block-mm {
    grid-area: 2/2/4/4;
    background-image: 
      linear-gradient(0deg, transparent 40%, var(--color-bg) 40%, var(--color-bg) 60%, transparent 60%),
      linear-gradient(90deg, transparent 40%, var(--color-bg) 40%, var(--color-bg) 60%, transparent 60%),
      radial-gradient(circle, var(--color-1) 72%, var(--color-bg) 75%);
  }
}

.colored-blocks {
  background-image: $multiline, $multiline, $multiline, $multiline, $multiline, $multiline, $multiline, $multiline ;
  background-size: 14.25% 43%;
  background-position:
    0 0, 
    top 25% left 14.25%,
    top 50% left 28.5%,
    top 75% left 42.75%,
    top 100% left 57%,
    top 125% left 71.25%,
    top 150% left 85.5%,
    top 175% left 97.75%;
  background-repeat: repeat-y;
}

.lines {
  border: .125rem solid var(--color-bg);
  &.lines-45 {
    @include stripes(-48deg);
  }
  &.vertical {
    @include stripes(48deg);
  }
  &.horizontal {
    @include stripes(48deg);
  }
  &.dark {
    @include stripes(-48deg, false, var(--color-2), var(--color-1));
    border: none;
  }
}

.skew-left-down {
  transform: skewY(-48deg);
  transform-origin: right top;
}

.skew-bottom-left {
  transform: skewX(-42deg);
  transform-origin: right top;
}

@for $row from 1 through 10 {
  @for $col from 1 through 8 {
    .block-#{$row}-#{$col} {
      grid-area: #{$row}/#{$col}; 
    }
  }
}