.cards {
  display: grid;
  grid-template-columns: 1fr; /* one card per row */
  gap: 24px;
  padding: 12px 0;
  justify-content: center;
}

@media (max-width: 720px) {
  .cards {
    gap: 18px;
  }
}

.card {
  min-height: 100px;
  background: var(--bg-1);
  border: 2px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column; /* default for phones */
}

/* Larger screens: side-by-side layout */
@media (min-width: 721px) {
  .card {
    flex-direction: row;
    max-height: 300px;
    min-height: 300px;
  }
}

/* Image styles */
.card-image,
.card-image-placeholder {
  width: 100%;          /* full width on phones */
  min-height: 200px;
  flex: 0 0 auto;
  justify-content: center;
}

@media (min-width: 721px) {
  .card-image,
  .card-image-placeholder {
    width: 30%;          /* left side on desktop/tablet */
    min-height: auto;
    padding: 10px 10px 10px 1rem;
    border-radius: 20px;
    justify-content: center;
  }
}

/* Info section */
.card-info {
  padding: 16px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 720px) {
    .card-description {
        margin-top: 0.5em;
        overflow: visible;   /* let text expand */
        flex: 1;             /* allow it to take remaining space */
    }
}