
.dlsCardTilt {
  box-sizing: content-box;
  margin: 0 auto;
  padding-bottom: 1.875rem;
  perspective: 600px;
  visibility: hidden;
}

.dlsCardTilt .dlsCardTiltLeft,
.dlsCardTilt .dlsCardTiltRight {
  bottom: 0;
  display: block;
  position: absolute;
  top: 0;
  visibility: visible;
  width: 50%;
  z-index: 1;
}

.dlsCardTilt .dlsCardTiltLeft {
  left: 0;
}

.dlsCardTilt .dlsCardTiltLeft:hover + .dlsCardTiltRight + .dlsCardTiltContainer {
  transform: rotateY(-30deg);
}

.dlsCardTilt .dlsCardTiltLeft:hover + .dlsCardTiltRight + .dlsCardTiltContainer::before {
  transform: translateX(25%);
}

.dlsCardTilt .dlsCardTiltRight {
  right: 0;
}

.dlsCardTilt .dlsCardTiltRight:hover + .dlsCardTiltContainer {
  transform: rotateY(30deg);
}

.dlsCardTilt .dlsCardTiltRight:hover + .dlsCardTiltContainer::before {
  transform: translateX(-25%);
}

.dlsCardTilt .dlsCardTiltContainer {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: content-box;
  background-size: contain;
  background-image: inherit;
  visibility: visible;
  transition: transform 0.8S ease-out;
}

@media (prefers-reduced-motion) {  .dlsCardTilt .dlsCardTiltContainer {
    transition: transform 0s;
  }
}

.dlsCardTilt .dlsCardTiltContainer::before {
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 45%, rgba(255, 255, 255, 0.25) 55%, rgba(255, 255, 255, 0) 100%);
  bottom: 0;
  content: "";
  display: block;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  top: 0;
  transition: transform 0.8S ease-out;
  width: 60%;
}

@media (prefers-reduced-motion) {  .dlsCardTilt .dlsCardTiltContainer::before {
    transition: transform 0s;
  }
}

.dlsCardTilt .dlsCardTiltContainer::after {
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.13) 0%, rgba(0, 0, 0, 0) 75%);
  bottom: -1.40625rem;
  content: "";
  display: block;
  height: 0.9375rem;
  left: 0;
  position: absolute;
  right: 0;
}