.page-home .resources-preview .resource-card {
  isolation: isolate;
}

@media (hover: hover) and (pointer: fine) {
  .page-home .resources-preview .resource-card:hover {
    transform: translateY(-6px);
    box-shadow:
      0 18px 48px rgba(0, 0, 0, .2),
      inset 3px 0 0 rgba(119, 78, 255, .88),
      inset -3px 0 0 rgba(205, 255, 77, .92),
      inset 0 14px 28px rgba(119, 78, 255, .07),
      inset 0 -14px 28px rgba(205, 255, 77, .09);
  }
}

.page-home .resources-preview .resource-card:has(a:focus-visible) {
  transform: translateY(-6px);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, .96),
    0 18px 48px rgba(0, 0, 0, .2),
    inset 3px 0 0 rgba(119, 78, 255, .88),
    inset -3px 0 0 rgba(205, 255, 77, .92),
    inset 0 14px 28px rgba(119, 78, 255, .07),
    inset 0 -14px 28px rgba(205, 255, 77, .09);
}

.page-home .resources-preview .resource-card a:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 3px;
}

.page-home .resources-preview .resource-card:has(a:focus-visible) .resource-card__media img {
  transform: scale(1.04);
}

@media (hover: none), (pointer: coarse) {
  .page-home .resources-preview .resource-card:hover {
    transform: none;
    box-shadow: none;
  }

  .page-home .resources-preview .resource-card:hover .resource-card__media img {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .resources-preview .resource-card,
  .page-home .resources-preview .resource-card__media img {
    transition: none;
  }

  .page-home .resources-preview .resource-card:hover,
  .page-home .resources-preview .resource-card:has(a:focus-visible),
  .page-home .resources-preview .resource-card:hover .resource-card__media img,
  .page-home .resources-preview .resource-card:has(a:focus-visible) .resource-card__media img {
    transform: none;
  }
}