@media (max-width: 1100px) {
  .wrapper {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 30px;
    align-items: center;
  }

  .container {
    order: -1;
  }

  .controls {
    order: 1;
    row-gap: 40px;
  }

  .winner {
    margin-bottom: 0;

    font-size: 1em;
  }

  .container .wheel .number span {
    max-width: 90px;
  }

  .error {
    bottom: 70px;

    font-weight: 600;
  }
}

@media (max-width: 475px) {
  h1 {
    font-size: 3.5em;
  }

  canvas {
    width: 290px;
    height: 290px;
  }

  .triangle {
    right: -156%;
  }

  .controls label span {
    font-size: 1em;
  }
}

@media (max-width: 350px) {
  .container {
    width: 270px;
    height: 270px;
  }
}