/* Responsive grid utilities for card layouts */
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns, 1), minmax(0, 1fr));
  gap: var(--grid-gap, 1.5rem);
  align-items: stretch;
}

/* Use this on child cards for consistent heights */
.responsive-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Optional utility for media/card images */
.responsive-media {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.responsive-media img,
.responsive-media iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 640px) {
  .responsive-grid {
    gap: var(--grid-gap-mobile, var(--grid-gap, 1rem));
  }
}