.writing-card {
  background: rgba(30, 41, 59, .88);
  border: 2px solid rgba(255, 255, 255, .15);
  border-radius: 24px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, .12);
  backdrop-filter: blur(20px);
}

.writing-card:hover,
.writing-card:focus-visible {
  transform: translateY(-8px);
  border-color: var(--teal);
  background: rgba(15, 23, 42, .96);
  box-shadow: 0 25px 50px rgba(0, 0, 0, .3);
  outline: none;
}

.image-wrap {
  margin: 20px 20px 0;
  padding: 8px;
  background: rgba(15, 23, 42, .44);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 17px;
}

.image-wrap img { border-radius: 11px; }

.card-info {
  margin-top: 18px;
  padding: 18px 22px 21px;
  border-top: 1px solid rgba(255, 255, 255, .15);
}

.card-info span { color: var(--mint); }
.card-info h2 { color: #fff; }

.card-info button {
  color: var(--ink);
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
  transition: .3s;
}

.writing-card:hover .card-info button,
.writing-card:focus-visible .card-info button {
  color: #fff;
  background: var(--teal);
  transform: scale(1.06);
  box-shadow: 0 10px 24px rgba(14, 180, 160, .35);
}

@media (max-width: 520px) {
  .image-wrap { margin: 14px 14px 0; }
  .card-info { margin-top: 14px; }
}