/* Subtle product image inflate on hover */
.card-figure {
  overflow: hidden; }

.card-figure img {
  transition: transform 160ms ease; }

.card:hover .card-figure img {
  transform: scale(1.03); }

a:hover > [id^="sd-image-"] {
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22), 0 6px 18px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px); }

/* YOUR CUSTOM HTML FEATURE BLOCKS */
.gh-feature-card {
  overflow: visible !important; }

.gh-feature-link {
  display: block !important;
  /* key: make the <a> a real box */
  border-radius: 10px !important;
  overflow: visible !important;
  transition: box-shadow 220ms ease, transform 220ms ease !important;
  -webkit-transform: translateZ(0);
  /* helps on some browsers/themes */
  transform: translateZ(0); }

.gh-feature-link:hover {
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22), 0 6px 18px rgba(0, 0, 0, 0.12) !important;
  transform: translateY(-4px) translateZ(0) !important; }

/* CUSTOM HTML FEATURE BLOCKS: target the flex wrapper by its inline styles */
div[style*="display: flex"][style*="flex-wrap: wrap"][style*="gap: 30px"] a {
  display: block !important;
  border-radius: 10px !important;
  transition: box-shadow 220ms ease, transform 220ms ease !important;
  transform: translateZ(0); }

div[style*="display: flex"][style*="flex-wrap: wrap"][style*="gap: 30px"] a img {
  display: block !important;
  width: 100% !important;
  border-radius: 10px !important; }

div[style*="display: flex"][style*="flex-wrap: wrap"][style*="gap: 30px"] a:hover {
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22), 0 6px 18px rgba(0, 0, 0, 0.12) !important;
  transform: translateY(-4px) translateZ(0) !important; }

/* Mobile safeguard */
@media (hover: none) {
  div[style*="display: flex"][style*="flex-wrap: wrap"][style*="gap: 30px"] a:hover {
    box-shadow: none !important;
    transform: none !important; } }