💰 Choose Your Plan

/* The magic is in these 3 lines */
.pricing-grid {
    display: flex; /* Enables flexbox */
    flex-wrap: wrap; /* Cards wrap on small screens */
    justify-content: center; /* Centers the row */
    gap: 30px; /* Space between cards */
}

.pricing-card {
    width: 320px; /* Fixed width per card */
}

/* On mobile, cards stack vertically */
@media (max-width: 768px) {
    .pricing-card {
        width: 100%;
        max-width: 350px;
    }
}

/* Question 1: How do you make 3 cards sit side by side? */
/* Answer: display: flex; gap: 30px; on parent */

/* Question 2: What makes cards wrap on mobile? */
/* Answer: flex-wrap: wrap; */

/* Question 3: How to highlight the popular plan? */
/* Answer: Add a different border, scale, or badge */

/* Question 4: What property adds space between cards? */
/* Answer: gap: 30px; */