@layer components {
  @scope (.metrics) {
    .metric-cards {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1px;
      background: rgba(244, 239, 227, 0.14);
      border: 1px solid rgba(244, 239, 227, 0.14);
      margin: 0;
      padding: 0;
      list-style: none;
    }
    @media (min-width: 640px) {
      .metric-cards {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      }
    }

    .metric-card {
      background: var(--ink);
      padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 2vw, 1.75rem);
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      min-block-size: 190px;
    }

    .metric-card__value {
      font-family: var(--font-display);
      font-weight: normal;
      font-size: clamp(3rem, 6vw, 4.75rem);
      line-height: 0.85;
      color: var(--green-bright);
      font-variant-numeric: tabular-nums;
    }

    .metric-card__label {
      font-family: var(--font-mono);
      font-size: 0.74rem;
      line-height: 1.4;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: rgba(244, 239, 227, 0.7);
      margin-block-start: auto;
    }
  }
}