Productivity Challenge

.stress-grid {
  display: grid;
  grid-template-columns: xs(1fr) md(repeat(auto-fill, minmax(120px, 1fr)));
  gap: density(2);
}

@each $tone in $tones {
  .stress-tone-#{$tone} {
    @ds-surface(flat #{$tone} radius(3));
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;

    &:hover {
      transform: translateY(-4px) scale(1.02);
      box-shadow: shadow(4);
    }
    
    .title {
      @ds-typography(h6 bold);
      margin-bottom: density(1);
    }
    .badge { 
      @ds-surface(contained surface density(0) radius(full)); 
    }
  }
}

{/* Responsive Grid Container */}
<div className="stress-grid">
  {Array.from({ length: 1000 })
    .map((_, i) => (
      <div 
        key={i} 
        className={`stress-card 
          stress-tone-${i % 5}`}
      >
        <div className="stress-card-title">
          Item {i + 1}
        </div>
        <div className="stress-card-badge">
          #{i % 5}
        </div>
      </div>
    ))
  }
</div>