.experiment-page .experiment-card-stage {
  display: flex;
  min-width: 0;
}
.experiment-page .experiment-card-stage > .course-card {
  width: 100%;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .experiment-page .experiment-card-stage > .course-card,
  .course-list-new .course-item-wrap > .course-item {
    position: relative;
  }
  .experiment-page .experiment-card-stage > .course-card::after,
  .course-list-new .course-item-wrap > .course-item::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(400px circle at var(--card-glow-x, 50%) var(--card-glow-y, 30%), #ffffff38, transparent 60%);
    opacity: 0;
    transition: opacity .3s;
  }
  .experiment-page .experiment-card-stage > .course-card.is-tilting,
  .course-list-new .course-item-wrap > .course-item.is-tilting {
    z-index: 3;
    transform: perspective(850px) translate3d(0, -9px, 0) rotateX(var(--card-rx, 0deg)) rotateY(var(--card-ry, 0deg));
    will-change: transform;
    border-color: #a9ccf4;
    transition: transform .13s ease-out, box-shadow .3s, border-color .25s;
    box-shadow: 0 20px 34px -10px #21558e38, 0 7px 14px #285c8f17;
  }
  .experiment-page .experiment-card-stage > .course-card.is-tilting::after,
  .course-list-new .course-item-wrap > .course-item.is-tilting::after {
    opacity: 1;
  }
  .experiment-page .course-card.is-tilting .thumb-img,
  .course-list-new .course-item.is-tilting .course-img img {
    transform: scale(1.035);
  }
}
@media (prefers-reduced-motion: reduce) {
  .experiment-page .course-grid .course-card,
  .experiment-page .course-grid .thumb-img,
  .course-list-new .course-item-wrap > .course-item,
  .course-list-new .course-item .course-img img {
    transform: none !important;
    transition: none !important;
  }
}