Weekly Challenge: Build a Responsive Pricing Table

This week, let us build a responsive pricing table that stays clear on mobile, tablet, and desktop. Start with a simple content plan: plan name, price, feature list, and a call-to-action. Use CSS Grid to define columns and rows for each plan, then switch to a stacked layout on small screens. Pay attention to visual hierarchy: make the price obvious, keep feature text readable, and highlight the recommended plan with subtle color or spacing. Avoid heavy shadows or noisy backgrounds that distract from comparison. Think about accessibility too, including contrast and focus states. Share your solution and explain the decisions you made, especially around spacing, alignment, and breakpoints. If you used variables or tokens, mention how they helped you stay consistent. This challenge is about clarity, not decoration, so keep your code clean and your layout confident.