@keyframes kv-fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── kv-card component ──────────────────────────────────────────────────── */

.kv-card {
  display: block;
  width: 100%;
  height: 100%;
  padding: 1.25rem;
  border-radius: 1rem;
  background-color: #f7f7f7;
  position: relative;
  overflow: hidden;
  opacity: 0;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  color: inherit;
  text-decoration: none;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.kv-card.kv-card--visible {
  animation: kv-fade-up 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.kv-card:hover {
  transform: translateY(-6px);
  box-shadow: rgba(50, 50, 93, 0.28) 0px 14px 32px -6px,
              rgba(0, 0, 0, 0.32) 0px 6px 16px -4px;
  color: inherit;
}

/* ─── Image ─────────────────────────────────────────────────────────────── */

.kv-card__img-wrap {
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px #e2e2e2;
}

.kv-card__img {
  display: block;
  width: 100%;
  height: 17rem;
  object-fit: cover;
  border-radius: 0;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.kv-card:hover .kv-card__img {
  transform: scale(1.06);
}

/* ─── Body ───────────────────────────────────────────────────────────────── */

.kv-card__body {
  padding-top: 0.5rem;
}

.kv-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: #a9a9a9;
  margin-left: 5px;
  margin-right: 5px;
}

.kv-card__title {
  font-size: 1.125rem;
  line-height: 1.5;
  color: #1d1d1f;
  margin: 12px 0;
}

.kv-card__subtitle {
  font-size: 0.875rem;
  color: #a9a9a9;
  font-style: italic;
}