style.css

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
}

.container {
  background-color: #34d1bf;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  place-items: center;
  padding: 0.5em;
  height: 80vh;
  min-height: 20em;
  width: 40em;
  min-width: 20em;
  border-radius: 4em;
}

.cell {
  background-color: #3454d1;
  height: 175px;
  width: 175px;
  display: grid;
  place-items: center;
  border-radius: 15em;
  font-size: 48px;
  user-select: none;
}

.cell:hover {
  opacity: 75%;
}

/*
  Hacer una media query para que:
  - a partir de 656 width el container se quede al 100% de width
  - a partir de 672 height el container y las celdas escale correctamente
  - a partir de 564 width reducir el tamaño de las celdas  
*/