:root{
  --vhc-card-w: 360px;              /* matches your screenshot's compact width */
  --vhc-pad: 18px;                  /* inner white padding around image & content */
  --vhc-radius: 12px;               /* rounded card corners */
  --vhc-img-h: 210px;               /* short image height like screenshot */
  --vhc-teal: #0e9db3;              /* button teal */
  --vhc-title: #0f2438;             /* dark title color */
  --vhc-shadow: 0 3px 14px rgba(0,0,0,.10);
  --vhc-shadow-hover: 0 6px 20px rgba(0,0,0,.16);
}

/* 3 equal-width cards centered with equal gaps */
.vhc-grid{
  display:grid;
  grid-template-columns: repeat(3, var(--vhc-card-w));
  justify-content:center;
  gap:38px;
  padding:80px 0;
  padding-bottom: 20px;
}

/* card shell */
.vhc-card{
  background:#fff;
  border-radius:var(--vhc-radius);
  box-shadow:var(--vhc-shadow);
  transition:.2s ease;
}
.vhc-card:hover{
  box-shadow:var(--vhc-shadow-hover);
  transform: translateY(-2px);
}

/* inner padding (creates the white frame around the image) */
.vhc-card-pad{ padding:var(--vhc-pad); }

/* image sits INSIDE with rounded corners and not touching the edges */
.vhc-img-wrap{
  display:block;
  border-radius:0px;
  overflow:hidden;
  margin-bottom:12px;
  background:#f3f5f6;
}
.vhc-img-wrap img{
  width:100%;
  height:var(--vhc-img-h);
  object-fit:cover;
  display:block;
}

/* title exactly like screenshot: small, bold, centered, compact */
.vhc-title{
  font-size:18px;
  font-weight:700;
  color:var(--vhc-title);
  text-align:center;
  margin:1px 2px 1px;
  line-height:1.35;
  min-height:35px; /* keep heights uniform if titles wrap */
}

/* action row */
.vhc-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  padding-bottom:4px;
}

/* buttons: compact, uppercase, same sizing as screenshot */
.vhc-btn{
  text-decoration:none;
  text-transform:uppercase;
  font-size:13px;
  font-weight:600;
  letter-spacing:.3px;
  line-height:1;
  padding:11px 16px;        /* compact height */
  border-radius:2px;
  border:1px solid transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* filled teal button */
.vhc-btn-primary{
  background:#047F84;
  border-color:#047F84;
  color:#fff;
}
.vhc-btn-primary:hover{ filter:brightness(.92); }

/* outline button (black border & text like screenshot) */
.vhc-btn-outline{
  background:#fff;
  border-color:#222;
  color:#222;
}
.vhc-btn-outline:hover{
  background:#222;
  color:#fff;
}

/* responsive: 2 per row on tablets, 1 on phones */
@media (max-width: 1024px){
  .vhc-grid{ grid-template-columns: repeat(2, minmax(280px, 1fr)); }
}
@media (max-width: 640px){
  .vhc-grid{ grid-template-columns: 1fr; padding:16px; }
  .vhc-card{ width:100%; }
}