// // ------------------------------------
// // Card Component
// // ------------------------------------

// .card {
//   background-color: $color-white;
//   border-radius: $border-radius;
//   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
//   padding: spacer(3);
//   display: flex;
//   flex-direction: column;
//   transition: box-shadow 0.3s ease;

//   // Hover effect for desktop
//   &:hover,
//   &:focus-within {
//     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
//   }

//   // Make card content take full width
//   &__header,
//   &__body,
//   &__footer {
//     width: 100%;
//   }

//   &__header {
//     margin-bottom: spacer(2);
//     font-weight: $font-weight-semibold;
//     font-size: 1.25rem;
//     color: $color-heading;
//   }

//   &__body {
//     flex-grow: 1;
//     font-size: 1rem;
//     color: $color-text;
//     margin-bottom: spacer(2);
//   }

//   &__footer {
//     text-align: right;
//     font-size: 0.875rem;
//     color: $color-muted;
//   }
// }

// // Optional: card with image
// .card--with-image {
//   padding: 0;
//   overflow: hidden;

//   &__image {
//     width: 100%;
//     height: auto;
//     display: block;
//     object-fit: cover;
//   }
// }