body {
  margin: 0;
  background-image: linear-gradient(#CBCC33, #996533);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

$size: 5.5vmin;
$cols: 8;
$rows: 11;
$sqrt2: 2.8284;
$s: $size / 8;

.grid {
  display: grid;
  grid-template-columns: repeat($cols, $size);
  grid-template-rows: ($rows, $size);
  grid-gap: 0 $size*2;
  position: relative;
  transform: scale(0.75);
}

.cell {
  width: $size;
  height: $size;
  border: 2px solid black;
  margin-top: -2px;
  position: relative;
}

@for $i from 1 through $cols {
  .cell:nth-child(#{$i})::after { 
    content: '';
    background: linear-gradient(#97CA65, #6B9831);
    position: absolute;
    height: calc(#{$size*$rows} + 2px * #{$rows - 1});
    width: 100%;
  }
}

@for $i from 1 through ($cols) {
  .cell:nth-child(#{$cols*2}n+#{$i}) {
    &::before {
      $f: $size * $sqrt2 / 4;
      content: '';
      position: absolute;
      width: $s;
      height: $s*2;
      background: transparent;
      left: calc(50% - #{$s/2} - 1px);
      top: calc(50% - #{$s} - 1px);
      box-shadow: 
        calc(#{$f} + #{$s*0}) 0 0 0 black,
        calc(#{$f} + #{$s*1}) 0 0 0 white,
        calc(-#{$f} - #{$s*0.5}) 0 0 0 black,
        calc(-#{$f} + #{$s*0.5}) 0 0 0 white,
  
        -($s*0.4) calc(#{-$f} - #{$s*0.3}) 0 0 white,
        ($s*0.6) calc(#{-$f} - #{$s*0.3}) 0 0 black,
        -($s*0.2) calc(#{$f} + #{$s*0.3}) 0 0 white,
        ($s*0.8) calc(#{$f} + #{$s*0.3}) 0 0 black;
      transform: rotate(45deg);
      z-index: 1;
    }
  }
}

@for $i from 1 through ($cols/2) {
  .cell:nth-child(#{$cols*2}n+#{$i*2}) {
    border-right-color: white;
    border-top-color: white;
    &::before {
      left: calc(50% - #{$s/2});
      top: calc(50% - #{$s} - 1px);
      transform: rotate(135deg);
    }
  }
  .cell:nth-child(#{$cols*2}n+#{$i*2 - 1}) {
    border-left-color: white;
    border-top-color: white;
  }
  .cell:nth-child(#{$cols*2}n+#{$cols + $i*2}) {
    border-left-color: white;
  }
  .cell:nth-child(#{$cols*2}n+#{$cols + $i*2 - 1}) {
    border-right-color: white;
  }
}