@media (max-width: 768px) {
  main {
    width: 100%;
    padding: 10px;
  }

.card--sannin {
    --card-scale: calc(100vw / 400);
    width: var(--card-width);
    height: var(--card-height);
    aspect-ratio: 370 / 126;
  }
  
  .card {
    width: 100%;
    height: auto;
    aspect-ratio: 370 / 126;
    
    --card-scale: calc(100vw / 400);
    width: var(--card-width);
    height: var(--card-height);
  }

.card--classic {
    --card-scale: calc(100vw / 400);
    width: var(--card-width-classic);
    height: var(--card-height-classic);
    aspect-ratio: 386 / 104;
  }

  .input-group {
    flex-direction: column;
    align-items: flex-start;
  }

  .input-group label {
    width: 100%;
    text-align: left;
    margin-bottom: 5px;
  }
}

@media (max-width: 400px) {
  .card--sannin, .card--classic {
    --card-scale: 0.8;
  }
}