.slot-wrap .sl {
  transition:
    transform .28s cubic-bezier(.34, 1.2, .64, 1),
    box-shadow .28s ease,
    border-color .28s ease;
}

.slot-wrap .sl:hover,
.slot-wrap .sl:focus-within {
  border-color: var(--acc);
  box-shadow: 0 16px 42px rgba(15, 23, 42, .14);
  transform: translateY(-6px);
}

.slot-wrap .sl__img::after {
  content: "" !important;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0) 35%, rgba(15, 23, 42, .34) 100%),
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 48%);
  opacity: 0;
  transition: opacity .28s ease;
}

.slot-wrap .sl:hover .sl__img::after,
.slot-wrap .sl:focus-within .sl__img::after {
  opacity: 1;
}

.slot-wrap .sl__img img {
  transition:
    transform .36s ease,
    filter .36s ease;
}

.slot-wrap .sl:hover .sl__img img,
.slot-wrap .sl:focus-within .sl__img img {
  filter: saturate(1.08) contrast(1.04);
  transform: scale(1.08);
}

.slot-wrap .sl__tag,
.slot-wrap .sl__prov,
.slot-wrap .sl__name,
.slot-wrap .sl__rtp-badge,
.slot-wrap .sl__play,
.slot-wrap .sl__det {
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    color .22s ease,
    background-color .22s ease,
    border-color .22s ease;
}

.slot-wrap .sl:hover .sl__tag,
.slot-wrap .sl:hover .sl__prov,
.slot-wrap .sl:focus-within .sl__tag,
.slot-wrap .sl:focus-within .sl__prov {
  transform: translateY(-2px);
}

.slot-wrap .sl:hover .sl__prov,
.slot-wrap .sl:focus-within .sl__prov {
  background: rgba(255, 255, 255, .96);
  color: var(--tx);
}

.slot-wrap .sl:hover .sl__name,
.slot-wrap .sl:focus-within .sl__name {
  color: var(--acc-d);
}

.slot-wrap .sl:hover .sl__rtp-badge,
.slot-wrap .sl:focus-within .sl__rtp-badge {
  background: rgba(67, 56, 202, .12);
  border-color: rgba(67, 56, 202, .28);
  transform: translateY(-1px);
}

.slot-wrap .sl:hover .sl__play,
.slot-wrap .sl:focus-within .sl__play {
  box-shadow: 0 7px 18px rgba(67, 56, 202, .34);
  transform: translateY(-1px);
}

.slot-wrap .sl:hover .sl__det,
.slot-wrap .sl:focus-within .sl__det {
  background: rgba(67, 56, 202, .04);
  border-color: rgba(67, 56, 202, .35);
  color: var(--acc);
  transform: translateY(-1px);
}

@media (hover: none) {
  .slot-wrap .sl:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .slot-wrap .sl,
  .slot-wrap .sl *,
  .slot-wrap .sl__img::after {
    animation: none !important;
    transition: none !important;
  }

  .slot-wrap .sl:hover,
  .slot-wrap .sl:focus-within,
  .slot-wrap .sl:hover .sl__img img,
  .slot-wrap .sl:focus-within .sl__img img {
    transform: none;
  }
}