.card {
  position: relative;
  isolation: isolate;
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.08) 68%, rgba(2, 2, 2, 0.94) 100%),
    url("assets/marble-gold-v2.png");
  background-size: cover;
  background-position: center;
  border-color: rgba(255, 205, 91, 0.62);
  box-shadow:
    0 20px 56px rgba(0, 0, 0, 0.62),
    0 0 20px rgba(214, 151, 33, 0.08),
    inset 0 0 0 1px rgba(255, 226, 154, 0.10),
    inset 0 1px 0 rgba(255, 236, 188, 0.18);
}

.image-wrap {
  position: relative;
  z-index: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  padding: 0;
  background: #080604;
}

.image-wrap::before,
.image-wrap::after { display: none; }

.image-wrap img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  border-radius: 0;
  filter:
    saturate(1.04)
    contrast(1.03)
    brightness(1.02);
}

.card-body {
  position: relative;
  z-index: 3;
  margin-top: -1px;
  background: linear-gradient(180deg, rgba(11, 8, 3, 0.82), rgba(3, 3, 3, 0.98));
  border-top: 1px solid rgba(255, 205, 93, 0.42);
  backdrop-filter: blur(5px);
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(118deg, transparent 0 38%, rgba(255, 239, 196, 0.06) 47%, transparent 56%);
  mix-blend-mode: screen;
}

@media (max-width: 719px) {
  .card { border-radius: 18px; }
  .card-body { padding: 12px 11px 14px; }
}