/* 1. The Grid Layout */
.pricing-grid {
  display: grid;
  gap: 20px;
  /* Mobile: 1 column wide */
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .pricing-grid {
    /* PC: 2 columns wide, each is 1fr */
    grid-template-columns: 1fr 1fr;
  }
}

/* 2. The Card Styling */
.card {
  width: 100%; /* Fill the grid space */
  color: white;
  text-align: center;
  background-image: url('images/pricing.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  border-radius:10px;
}



/* Make sure text is readable against the image */
.pricingheader {
  padding: 20px;
  background: rgba(0, 0, 0, 0.3);
  font-size:20px;
}

.pricingbody {
  padding: 5%;
  background: rgba(0, 0, 0, 0.5); /* Tint to make white text pop */
  text-align: left; /* Keeps your list aligned left while card is centered */
  border-radius:10px;
}