html {
  background-color: #ec6176;
}

.container_video1 {
  margin: 70px auto 0px;
  display: grid;
  justify-content: center;
  background-image: url(../img/BG_TahaMode_20Jahre-Atelier.svg);
  background-position: center -25vh;
  background-size: auto 142.4vh;
  background-repeat: no-repeat;
  grid-template-rows: 1vh 1fr 2vh;
}

.wrap {
  grid-row: 2 / 3;
  display: grid;
  position: relative;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  place-items: center;
  height: 88vh;
  aspect-ratio: 1080/ 1920;
  background-image: url("../img/Logo_TahaMode_20Jahre-Atelier.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

video {
  grid-area: 1/1;
  width: 100%;
  height: auto;
  display: block;
  cursor: default;
  opacity: 1;
  visibility: visible;
  animation-fill-mode: forwards;
}

video:hover {
  opacity: 1;
}

.play-overlay {
  grid-area: 1/1;
  justify-self: center;
  align-self: center;
  width: 20%;
  aspect-ratio: 1/1;
  max-width: 160px;
  background-image: url("../img/TahaMode_play.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
  z-index: 2;
  pointer-events: auto;
}

.hidden {
  display: none !important;
}

.video_final {
  animation: fadeOut 0.5s ease forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
    visibility: visible;
  }
  99% {
    opacity: 0;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}