.zp-card{
  position:relative;
  overflow:hidden;
  border-radius:0;
  border:1px solid rgba(39,17,22,.12);
  background:#ffffff;
  box-shadow:0 18px 38px rgba(0,0,0,.08);
  transition:transform .2s ease,border-color .2s ease;
  outline:none;
}
.zp-card:hover,
.zp-card:focus-visible{
  transform:translateY(-4px);
  border-color:#8a121d;
}
.zp-card__top{position:relative}
.zp-card__img{
  width:100%;
  height:270px;
  object-fit:cover;
  filter:saturate(1.08) contrast(1.02);
  opacity:.92;
}
.zp-card__img--placeholder{
  height:270px;
  background:
    linear-gradient(135deg,#faf0f2 0%,#f3f3f6 100%);
}

/* this needs to be 220px height for the placeholder image */
.zp-card__top .zp-card__img--placeholder{
  height:220px;
  background:
    linear-gradient(135deg,#faf0f2 0%,#f3f3f6 100%);
}
.zp-grid-4 .zp-card__top .zp-card__img,
.zp-grid-4 .zp-card__top .zp-card__img--placeholder{
  height:220px;
}
.zp-card__glow{display:none}
.zp-card__body{padding:22px 22px 24px}
.zp-card__meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.zp-card__chip{
  font-size:.68rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#6d3238;
  padding:6px 12px;
  border-radius:0;
  border:1px solid rgba(39,17,22,.18);
  background:#fff;
}
.zp-card__titleRow{display:grid;gap:4px}
.zp-card__sub{color:#6b454a;font-size:.9rem;text-transform:uppercase;letter-spacing:.18em}
.zp-card__p{margin:12px 0 0;color:#4d3338;max-width:70ch;line-height:1.7}
.zp-card__cta{margin-top:18px}

@media (max-width:1024px){
  .zp-card{
    border-radius:var(--radius-sm);
  }
}

@media (max-width:900px){
  .zp-grid-4{
    grid-template-columns:1fr !important;
    gap:var(--space-5);
  }
}

@media (max-width:768px){
  .zp-card{
    border-radius:var(--radius-md);
    margin-bottom:var(--space-4);
    box-shadow:0 14px 34px rgba(0,0,0,.08);
  }
  .zp-card__body{
    padding:var(--space-5);
  }
  .zp-grid {
    width: 100% !important;
  }
  .zp-card__img,
  .zp-grid-4 .zp-card__top .zp-card__img{
    height:220px;
  }
}

@media (max-width:520px){
  .zp-card{
    border-radius:var(--radius-lg);
  }
  .zp-card__body{
    padding:var(--space-4);
  }
  .zp-card__img,
  .zp-grid-4 .zp-card__top .zp-card__img{
    height:200px;
  }
  .zp-grid {
    width: 100% !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .zp-card{transition:none}
}