.whpg-grid {
  display: grid;
  grid-template-columns: repeat(var(--whpg-cols, 3), minmax(0, 1fr));
  gap: var(--whpg-row-gap, 32px) var(--whpg-col-gap, 24px);
}

.whpg-item { min-width: 0; }
.whpg-card { display: block; text-decoration: none; color: inherit; }

.whpg-media {
  position: relative;
  overflow: hidden;
  height: var(--whpg-height, 420px);
  border-radius: var(--whpg-radius, 0px);
  background: #f2f2f2;
  isolation: isolate;
}

.whpg-visual {
  width: 100% !important;
  height: 100% !important;
  min-width: 100%;
  min-height: 100%;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center;
  display: block;
  transform: scale(1);
  filter: blur(0px);
  transition: filter var(--whpg-speed, 420ms) ease, transform var(--whpg-speed, 420ms) ease, opacity var(--whpg-speed, 420ms) ease;
}

.whpg-video {
  border: 0;
  background: #f2f2f2;
}

.whpg-overlay {
  position: absolute;
  inset: 0;
  background: var(--whpg-overlay, rgba(0,0,0,0));
  opacity: 0;
  transition: opacity var(--whpg-speed, 420ms) ease;
  z-index: 1;
}

.whpg-logo-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--whpg-logo-pad, 32px);
  z-index: 2;
  opacity: 0;
  transform: translateY(8px) scale(.98);
  transition: opacity var(--whpg-speed, 420ms) ease, transform var(--whpg-speed, 420ms) ease;
  pointer-events: none;
}

.whpg-logo {
  display: block;
  width: auto;
  max-width: var(--whpg-logo-width, 42%);
  max-height: var(--whpg-logo-height, 34%);
  object-fit: contain;
}

.whpg-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  width: 100%;
}

.whpg-name,
.whpg-service {
  min-width: 0;
  transition: color var(--whpg-speed, 420ms) ease, opacity var(--whpg-speed, 420ms) ease;
}

.whpg-name {
  flex: 1 1 auto;
  text-align: left;
}

.whpg-service {
  flex: 0 1 auto;
  text-align: right;
}

.whpg-card:hover .whpg-visual,
.whpg-card:focus-visible .whpg-visual {
  filter: blur(var(--whpg-blur, 5px));
  transform: scale(var(--whpg-scale, 1.04));
}
.whpg-card:hover .whpg-overlay,
.whpg-card:focus-visible .whpg-overlay { opacity: 1; }
.whpg-card:hover .whpg-logo-wrap,
.whpg-card:focus-visible .whpg-logo-wrap {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (max-width: 1024px) {
  .whpg-grid { grid-template-columns: repeat(var(--whpg-cols-tablet, 2), minmax(0, 1fr)); }
  .whpg-media { height: var(--whpg-height-tablet, var(--whpg-height, 360px)); }
}
@media (max-width: 767px) {
  .whpg-grid { grid-template-columns: repeat(var(--whpg-cols-mobile, 1), minmax(0, 1fr)); }
  .whpg-media { height: var(--whpg-height-mobile, var(--whpg-height, 320px)); }
}

@media (hover: none) {
  .whpg-mobile-logo-yes .whpg-logo-wrap { opacity: 1; transform: none; }
  .whpg-mobile-logo-yes .whpg-overlay { opacity: 1; }
}

@media (max-width: 480px) {
  .whpg-caption { align-items: flex-start; }
  .whpg-name { flex-basis: 58%; }
  .whpg-service { flex-basis: 42%; }
}