:root {
      --gap: 1rem;
      --max-width: 1600px;
    }

    body {
      margin: 0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      background: #f7f7f9;
      color: #222;
    }

    .container {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 1.5rem;
    }

    .grid5 {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: var(--gap);
    }

    .card {
      background: white;
      border: 1px solid #e5e7eb;
      border-radius: 0.5rem;
      padding: 1rem;
      box-shadow: 0 1px 2px rgba(0,0,0,0.06);
      min-height: 80px;
    }

    /* Tablet (≤ 1024px): 3 columns */
    @media (max-width: 1024px) {
      .grid5 {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    /* Mobile (≤ 640px): 1 column */
    @media (max-width: 640px) {
      .grid5 {
        grid-template-columns: 1fr;
      }
    }