:root{ --vhf-blue:#273583; }

.vhf-extra-boxes{
  display:grid;
  grid-template-columns: repeat(var(--cols,3), minmax(0,1fr));
  gap: 20px;
}

.vhf-extra-box{
  position:relative;
  display:flex; align-items:flex-end; justify-content:center;
  min-height: 260px;
  border-radius:14px;
  overflow:hidden;
  text-decoration:none;
  color:#fff;
  background:#e9eef9;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
}

.vhf-extra-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transform:scale(1.02);
}
.vhf-extra-ph{ background:#c9d3ec; }

.vhf-extra-overlay{
  position:absolute; inset:0;
  background:var(--vhf-blue);
  opacity:.55;
}

.vhf-extra-label{
  position:relative; z-index:2; display:block;
  text-align:center; width:100%;
  font-weight:900; text-transform:uppercase;
  padding:14px 16px;
  border-top:4px solid rgba(255,255,255,.35);
  text-shadow:0 2px 16px rgba(0,0,0,.45);
  font-size:clamp(14px,1.3vw,20px);
}
.vhf-extra-label small{
  display:block; font-weight:400; font-size:14px; margin-top:2px;
}

@media (max-width:900px){
  .vhf-extra-boxes{ --cols:2; }
}
@media (max-width:600px){
  .vhf-extra-boxes{ --cols:1; }
}