body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}

a {
  width: 100px;
  height: 100px;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.grid :nth-child(1),
body#one a {
  background: oklch(60% 0.216 13.97);
}
.grid :nth-child(2),
body#two a {
  background: oklch(60% 0.21 149.85);
}
.grid :nth-child(3),
body#three a {
  background: oklch(60% 0.21 250.65);
}
.grid :nth-child(4),
body#four a {
  background: oklch(60% 0.21 313.92);
}

body[id] a {
  width: 800px;
  height: 600px;
  display: grid;
  place-items: center;
  color: white;
  font: 900 300% system-ui;
  text-decoration: none;
}