Challenge: Refactoring an Inconsistent Card Layout

Review this real-world CSS from a messy feature branch:

.product-card {
  padding: 13px 19px 21px 15px;
  margin-bottom: 27px;
}
.product-card .title {
  margin-bottom: 7px;
}
.product-card .price {
  margin-bottom: 11px;
}

Notice the complete lack of mathematical harmony: four different uneven paddings, non-standard 7px and 11px margins, and a 27px bottom margin.

Refactoring to the 8-Point Spatial System:

• Card padding: Uniform 16px (space-16) or 16px 24px (space-16 space-24).
• Title to price gap: 8px (space-8).
• Price to CTA button gap: 16px (space-16).
• Card container: Remove margin-bottom: 27px and let the parent grid use gap: space-24.