/* Make the anchor a positioned card and responsive */
.page-card {
  position: relative;            /* needed for the absolute overlay */
  display: block;
  width: 100%;                   /* let the grid control the width */
  aspect-ratio: 3 / 2;           /* replaces fixed 300x200 */
  background-image: url("/static/css/images/bitimage.9e78dfa9697a.jpg"); /* see note below */
  background-size: cover;
  background-position: center;
  text-decoration: none;
  color: inherit;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: transform .2s ease, box-shadow .2s ease;
}

.page-card:hover {
  transform: translateY(-3px);   /* lift instead of scale (avoids layout jitter) */
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

.page-card:focus-visible {
  outline: 3px solid #CFB87C;    /* keyboard focus */
  outline-offset: 2px;
}

/* replace your current .page-card-content block with this */
.page-card-content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 140px;                      /* <-- uniform white band height */
  background: rgba(255,255,255,0.92);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .35rem;
  overflow: hidden;                    /* hide anything beyond the fixed height */
}

.page-card-content h2 {
  margin: 0;
  font-size: 1.1rem;
}

/* keep descriptions tidy inside the fixed band */
.page-card-content .description {
  margin: 0;
  font-size: .95rem;
  color: #444;
  display: -webkit-box;
  -webkit-line-clamp: 2;               /* show up to 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* motion preference */
@media (prefers-reduced-motion: reduce) {
  .page-card { transition: none; }
  .page-card:hover { transform: none; }
}