.video-container {
  position: relative;
  overflow: hidden;
	width: 100%;
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.video-container ~ .video-data .play-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 104px;
  height: 80px;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  overflow: hidden;
  clip-path: path('M54.42 8.2812C52.8426 9.31804 50.7491 9.2485 49.2326 8.12882C40.7353 1.85524 30.4135 -1.5872 20.1303 0.719903C12.771 2.37101 6.51984 7.51094 3.21156 14.1248C-6.41288 33.3659 7.1051 56.4338 23.7651 69.6375C43.1201 84.9771 59.648 80.8321 72.7529 72.9106C93.2972 60.4922 111.47 37.916 100.891 15.3138C97.5733 8.22585 91.3506 2.21528 83.5023 0.72418C73.1674 -1.23935 62.4641 2.99377 54.42 8.2812Z');
}

.video-container ~ .video-data .play-video:hover svg {
  color: var(--hover-btn);
}


.video-container ~ .video-data .play-video:before {
  display: none;
}

.video-container ~ .video-data .play-video > svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 104px;
  height: 80px;
  color: var(--sm-btn-color);
}

.video-container ~ .video-data .play-video__text--container {
  max-width: 96px;
}

.video-container ~ .video-data .play-video__text {
  position: relative;
  display: flex;
  gap: var(--gap-s);
  z-index: 1;
}

.video-container ~ .video-data .play-video:hover .play-video__text {
  animation: scroll-text 1s infinite linear;
}

.video-container ~ .video-data .play-video__text > div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  transform: translateX(3px);
}

.video-container ~ .video-data .play-video__text > div svg {
  width: 8px;
  height: 9px;
}

@keyframes scroll-text {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-106px);
  }
}

.video-container ~ .video-data .title {
  position: absolute;
  top: 48px;
  left: 48px;
  color: #fff;
  font-weight: 500;
  font-size: 56px;
  line-height: 56px;
  font-family: 'Cy Grotesk Key', sans-serif;
}

.video-container ~ .video-data .title.text-red {
  color: var(--red);
}

.video-container ~ .video-data .desc {
  position: absolute;
  right: 48px;
  bottom: 48px;
  max-width: 300px;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  font-weight: 500;
}

.video-container ~ .video-data .title,
.video-container ~ .video-data .desc,
.video-container ~ .video-data button {
  transition: transform 1s ease;
}

.video-container ~ .video-data .play-video * {
  pointer-events: none;
}

.video-container.hide-context ~ .video-data button,
.video-container.hide-context ~ .video-data .desc,
.video-container.hide-context ~ .video-data .title {
  transform: translateY(800px);
}

@media (max-width: 768px) {
  .video-container ~ .video-data .play-video {
    clip-path: unset;
  }

  .video-container ~ .video-data .play-video:hover .play-video__text,
  .video-container ~ .video-data .play-video__text {
    animation: none;
  }

  .video-container ~ .video-data .play-video__text > div:last-child {
    display: none;
  }

  .video-container ~ .video-data .play-video__text--container {
    max-width: 100px;
  }

  .video-container ~ .video-data .title,
  .video-container ~ .video-data .desc {
    display: none;
  }
}