<h1 class="title">Score:</h1>
<div class="game-board">
  <div class="head"></div>
  <div class="body1"></div>
  <div class="body2"></div>
  <div class="body3"></div>
  <div class="apple"></div>
</div>

$grid-size: 10;
$grid-gap: 0.25rem;

$board-color: #bbc701;
$block-color: #6c5f00;

$breakpoint-max: 1400px;
$breakpoint-interval: 40px;

@function generate-max-width($interval){
  @return $breakpoint-max - ($breakpoint-interval * $interval)
}

body {
  background-color: #404044;
  display: flex;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  
  &:before,
  &:after {
    transition: opacity 1s;
  }
  
  &:before {
    content: "slowly resize >";
    color: #ffffff;
    left: 0.75rem;
    position: absolute;
    opacity: 0.25;
  }
  &:after {
    content: "< slowly resize";
    color: #ffffff;
    right: 0.75rem;
    position: absolute;
    opacity: 0.25;
  }
  
  @media (max-width: generate-max-width(10)) {
    &:before,
    &:after {
      opacity: 0;
    }
  }
}

.title {
  color: #ffffff;
  align-slef: flex-start;
  position: relative;
  
  &:after {
    content: "000";
    padding-left: 1rem;
  }
}

.game-board {
  background-color: $board-color;
  border-radius: 0.5rem;
  padding: 1rem;
  height: 25rem;
  max-width: 25rem;
  width: 100%;
  position: relative;
  display: grid;
  grid-gap: $grid-gap;
  grid-template-columns: repeat($grid-size, 1fr);
  grid-template-rows: repeat($grid-size, 1fr);
  
  
  &:after {
    content: " ";
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    border: 3px solid $block-color;
  }
}

.head,
.body1,
.body2,
.body3 {
  background-color: $block-color;
}

.head {
  grid-column: 2 / 4;
  grid-row: 4;
}


.body1 {
  background-color: $block-color;
  grid-column: 2;
  grid-row: 2 / 5;
}

.body2,
.body3 { 
  display: none;  
}

.apple {
  border: 3px solid $block-color;
  grid-column: 7;
  grid-row: 6;
}

@media (max-width: generate-max-width(1)) {
  .head {
    grid-column: 2 / 5;
  }
  .body1 {
    grid-row: 3 / 5;
  }
}

@media (max-width: generate-max-width(2)) {
  .head {
    grid-column: 2 / 6;
  }
  .body1 {
    grid-row: 4;
  }
}


@media (max-width: generate-max-width(3)) {
  .head {
    grid-column: 6;
  }
  .body1 {
    grid-column: 3 / 7;
  }
}

@media (max-width: generate-max-width(4)) {
  .head {
    grid-column: 7;
  }
  .body1 {
    grid-column: 4 / 8;
  }
}

@media (max-width: generate-max-width(5)) {
  .head {
    grid-row: 4 / 6;
  }
  .body1 {
    grid-column: 5 / 8;
  }
}

@media (max-width: generate-max-width(6)) {
  .head {
    grid-row: 4 / 7;
  }
  .body1 {
    grid-column: 6 / 8;
  }
  .title {
    &:after {
      content: "010";
    }
  }
  .apple {
    grid-column: 5;
    grid-row: 5;
  }
}

@media (max-width: generate-max-width(7)) {
  .head {
    grid-row: 4 / 8;
  }
}

@media (max-width: generate-max-width(8)) {
  .head {
    grid-row: 4 / 9;
  }
  .body1 {
    grid-column: 7 / 8;
  }
}

@media (max-width: generate-max-width(9)) {
  .head {
    grid-row: 8;
    grid-column: 6 / 8;
  }
  .body1 {
    grid-column: 7;
    grid-row: 5 / 9;
  }
}

@media (max-width: generate-max-width(10)) {
  .head {
    grid-column: 5 / 8;
  }
  .body1 {
    grid-row: 6 / 9;
  }
}

@media (max-width: generate-max-width(11)) {
  .head {
    grid-row: 7 / 9;
    grid-column: 5;
  }
  .body1 {
    grid-row: 8;
    grid-column: 5 / 8;
  }
  .body2 {
    grid-row: 7 / 9;
    grid-column: 7;
    display: block;
  }
}

@media (max-width: generate-max-width(12)) {
  .head {
    grid-row: 6 / 9;
  }
  .body2 {
    display: none;
  }
}

@media (max-width: generate-max-width(13)) {
  .head {
    grid-row: 5 / 9;
  }
  .title {
    &:after {
      content: "020";
    }
  }
  .body1 {
    grid-column: 5 / 7;
  }
  .apple {
    grid-column: 3;
    grid-row: 6;
  }
}

@media (max-width: generate-max-width(14)) {
  .head {
    grid-row: 5;
    grid-column: 4 / 6;
  }
  .body1 {
    grid-column: 5;
    grid-row: 5 / 9;
  }
  .body2 {
    display: block;
    grid-row: 8;
    grid-column: 5 / 7;
  }
}

@media (max-width: generate-max-width(15)) {
  .head {
    grid-column: 3 / 6;
  }
  .body2 {
    display: none;
  }
}

@media (max-width: generate-max-width(16)) {
  .head {
    grid-row: 5 / 7;
    grid-column: 3;
  }
  .body1 {
    grid-column: 3 / 6;
    grid-row: 5;
  }
  .body2 {
    display: block;
    grid-column: 5;
    grid-row: 5 / 8;
  }
  .title {
    &:after {
      content: "030";
    }
  }
  .apple {
    grid-column: 8;
    grid-row: 4;
  }
}

@media (max-width: generate-max-width(17)) {
  .head {
    grid-row: 6;
    grid-column: 3 / 5;
  }
  .body3 {
    display: block;
    grid-row: 5 / 7;
    grid-column: 3;
  }
}

@media (max-width: generate-max-width(17.5)) {
  .title { color: #ff0000 }
}

@media (max-width: generate-max-width(18)) {
  .head, .body1, .body2, .body3 { display: none }
  .title { color: #ffffff }
}

@media (max-width: generate-max-width(18.5)) {
  .head, .body1, .body2, .body3 { display: block }
  .title { color: #ff0000 }
}

@media (max-width: generate-max-width(19)) {
  .head, .body1, .body2, .body3 { display: none }
  .title { color: #ffffff }
}

@media (max-width: generate-max-width(19.5)) {
  .head, .body1, .body2, .body3 { display: block }
  .title { color: #ff0000 }
}

@media (max-width: generate-max-width(20)) {
  .head, .body1, .body2, .body3 { display: none }
  .title { color: #ffffff }
}

@media (max-width: generate-max-width(20.5)) {
  .head, .body1, .body2, .body3 { display: block }
  .title { color: #ff0000 }
}

@media (max-width: generate-max-width(21)) {
  .head, .body1, .body2, .body3 { display: none }
  .title { color: #ffffff }
}

@media (max-width: generate-max-width(21.5)) {
  .head, .body1, .body2, .body3 { display: block }
  .title { color: #ffffff }
}