/* Shared hover effect for product "How it works" cards. Loaded after product themes. */
/* line 3, app/assets/stylesheets/product_how_hover.scss */
.product-layout #how-it-works .steps.how-hover-cards {
  grid-template-columns: 1fr;
}

/* line 7, app/assets/stylesheets/product_how_hover.scss */
.product-layout #how-it-works .steps.how-hover-cards .step {
  position: relative;
  transform-origin: center;
  transition: transform 400ms ease, filter 400ms ease, opacity 400ms ease, box-shadow 400ms ease;
}

@media (hover: hover) and (pointer: fine) {
  /* line 18, app/assets/stylesheets/product_how_hover.scss */
  .product-layout #how-it-works .steps.how-hover-cards:hover > .step:not(:hover) {
    filter: blur(8px);
    opacity: .72;
    transform: scale(0.94);
  }
  /* line 24, app/assets/stylesheets/product_how_hover.scss */
  .product-layout #how-it-works .steps.how-hover-cards > .step:hover {
    z-index: 2;
    transform: scale(1.06);
  }
}