@media (max-width: 500px) {
  .app-container > div {
    width: 100%;
    max-width: 100%;
  }
  .progress-container {
    width: 100%;
    left: 0;
    transform: unset;
  }
}

@media (max-width: 400px) {
  .gift-popup > div { width: 90%; }
}

@media (max-width: 370px) {
  :root { font-size: 8px; }
  .image-circle-container { width: 276px; height: 276px; }
  .inner-image-circle { width: 188px; height: 188px; }
  .image-circle { width: 100px; height: 100px; }
  .image-circle img { width: 120px; height: 120px; }
  .common-wrapper h2 { font-size: 1.7rem; }
}

@media (max-width: 300px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}