.hover-slide-box {
  --flex-direction: column;
  --justify-content: space-between;
  --align-items: center;
  --gap: 20px;

  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.hover-slide-box * {
  margin: 0;
  transition: all 0.3s ease;
}

.hover-slide-box .hover-slide-box__front,
.hover-slide-box .hover-slide-box__back {
  width: 100%;
  height: 100%;
}

.hover-slide-box .hover-slide-box__front {
  display: flex;
  flex-direction: var(--flex-direction);
  justify-content: var(--justify-content);
  align-items: var(--align-items);
  gap: var(--gap);
}

.hover-slide-box .hover-slide-box__back {
  position: absolute;
  top: 0;
  left: 0;
  background-position: center bottom !important;
  background-color: var(--e-global-color-primary);
}

.hover-slide-box .hover-slide-box__front {
  --slider-left: 100%;
  --slider-right: 100%;

  position: relative;
  z-index: 1;

  clip-path: polygon(0 0,
      100% 0,
      100% var(--slider-right),
      0 var(--slider-left));
}

.hover-slide-box .hover-slide-box__button {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hover-slide-box .hover-slide-box__front h3 {
  position: relative;
}

.hover-slide-box .hover-slide-box__front h3:after {
  content: "";
  position: absolute;

  display: block;
}