#logo {
  display: grid;
  grid-template-columns: repeat(7, 2em);
  grid-template-rows: repeat(3, 2em);
  grid-gap: 0.25em;
  padding: 0.25em;
}

#logo div:nth-child(1) {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}

#logo div:nth-child(2) {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
}

#logo div:nth-child(3) {
  grid-row: 3 / 4;
  grid-column: 1 / 2;
}

#logo div:nth-child(4) {
  grid-row: 3 / 4;
  grid-column: 2 / 3;
}

#logo div:nth-child(1),
#logo div:nth-child(2),
#logo div:nth-child(3),
#logo div:nth-child(4) {
  background: red;
  background: color(display-p3 1 0 0 / 1);
}

#logo div:nth-child(5) {
  grid-row: 1 / 2;
  grid-column: 3 / 4;
}

#logo div:nth-child(6) {
  grid-row: 2 / 3;
  grid-column: 3 / 4;
}

#logo div:nth-child(7) {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
}

#logo div:nth-child(8) {
  grid-row: 1 / 2;
  grid-column: 4 / 5;
}

#logo div:nth-child(9) {
  grid-row: 1 / 2;
  grid-column: 5 / 6;
}

#logo div:nth-child(10) {
  grid-row: 2 / 3;
  grid-column: 5 / 6;
}

#logo div:nth-child(11) {
  grid-row: 3 / 4;
  grid-column: 5 / 6;
}

#logo div:nth-child(5),
#logo div:nth-child(6),
#logo div:nth-child(7),
#logo div:nth-child(8),
#logo div:nth-child(9),
#logo div:nth-child(10),
#logo div:nth-child(11) {
  background: magenta;
  background: color(display-p3 1 0 1 / 1);
}

#logo div:nth-child(12) {
  grid-row: 3 / 4;
  grid-column: 4 / 5;
}

#logo div:nth-child(13) {
  grid-row: 1 / 2;
  grid-column: 6 / 7;
}

#logo div:nth-child(14) {
  grid-row: 1 / 2;
  grid-column: 7 / 8;
}

#logo div:nth-child(12),
#logo div:nth-child(13),
#logo div:nth-child(14) {
  background: blue;
  background: color(display-p3 0 0 1 / 1);
}

@media (max-width: 700px) {
  #logo {
    grid-template-columns: repeat(7, 1em);
    grid-template-rows: repeat(3, 1em);
    grid-gap: 0.125em;
    padding: 0.125em;
  }
}