body {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  background-color: #2c2d34;
}

.container {
  display: grid;
  grid-template-rows: 50px repeat(4, 100px) 50px;
  grid-template-columns: 50px repeat(4, 100px) 50px;
}

.item-0 {
  grid-row: 3/5;
  grid-column: 3/5;
}
.item-1 {
  grid-area: 2 / 2;
}
.item-2 {
  grid-area: 2 / 3;
}
.item-3 {
  grid-area: 2 / 4;
}
.item-4 {
  grid-area: 2 / 5;
}
.item-5 {
  grid-area: 3 / 5;
}
.item-6 {
  grid-area: 4 / 5;
}
.item-7 {
  grid-area: 5 / 5;
}
.item-8 {
  grid-area: 5 / 4;
}
.item-9 {
  grid-area: 5 / 3;
}
.item-10 {
  grid-area: 5 / 2;
}
.item-11 {
  grid-area: 4 / 2;
}
.item-12 {
  grid-area: 3 / 2;
}