.g-container {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;
}

#myCustomCanvas {
  border-radius: 1.6rem;
  aspect-ratio: 16/9;
}

.back-btn {
  max-width: 6rem;
  position: absolute;
  top: 0.8rem;
  left: 0.4rem;
}
/* rem and em do NOT depend on html font-size in media queries! Instead, 1rem = 1em = 16px */

/* @media (max-width: 89em) {.back-button {
  max-width: 128px;}
} */
/**************************/
/* BELOW 1344px (Smaller desktops) */
/**************************/

@media (max-width: 84em) {
  .back-button {
    width: 3.5rem;
  }
}

/**************************/
/* BELOW 1200px (Landscape Tablets) */
/**************************/

@media (max-width: 75em) {
  .back-button {
    width: 3rem;
  }
}

/**************************/
/* BELOW 944px (Tablets) */
/**************************/

@media (max-width: 59em) {
  .back-button {
    width: 2.5rem;
  }
}

/**************************/
/* BELOW 704px (Smaller tablets) */
/**************************/

@media (max-width: 44em) {
  .back-button {
    width: 2rem;
  }
}

/**************************/
/* BELOW 544px (Phones) */
/**************************/

@media (max-width: 34em) {
  .back-button {
    width: 1rem;
  }
}