#trailer {
  padding: 1rem;
  position: relative;
  width: 1440px;
  max-width: 100%;
  margin: 10em auto;
}

#trailer .section-header {
  font-size: clamp(40px, 5vw, 100px);
}

#trailer .text-block {
  text-align: center;
  color: #fff;
  margin-bottom: 1rem;
  position: relative;
}

#trailer .text-block p {
  max-width: 81%;
  margin: auto;

  text-shadow: 0px 0px 7px #205580, 0px 0px 7px #205580, 0px 0px 7px #205580,
    0px 0px 7px #205580, 0px 0px 7px #205580, 0px 0px 7px #205580,
    0px 0px 7px #205580 !important ;
}

.trailer-container {
  margin: 0 auto;
  position: relative;
  text-align: center;
}

.trailerpreview {
  width: 1345px;
  max-width: 100%;
  margin: auto;
}

.trailerCarousel {
  position: relative;
  margin: 0 auto;
  width: 1300px;
  max-width: 95%;
  border: 1;
}

.carouselVideo {
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
}
.carouselImg {
  width: 100%;
}

.playButton {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(50px, 20vw, 150px);
  pointer-events: none;
}

#trailer .trailerBox {
  position: relative;
  width: fit-content;
  max-width: 80%;
  z-index: 2;
}

#trailer .trailerContainer {
  width: 1040px;
  max-width: 100%;
}

.trailerBg {
  display: inline;
  width: 100%;
}
.trailerBgMobile {
  display: none;
}

#trailer .trailerHeader {
  position: absolute;
  /* top: 65px; */
  top: 8%;
  /* left: 400px; */
  left: 40%;
  letter-spacing: 0.05rem;
  z-index: 1;
}

#trailer .trailerHeader::before {
  content: "";
  background: url(../img/story-trailer/trailer_header_bg.png) center / 100%
    100% no-repeat;
  width: 170%;
  height: 200%;
  transform: translate(-50%, -51%) rotate(-3deg);
  display: block;
  top: 50%;
  left: 50%;
  position: absolute;
  z-index: -1;
}

#trailer .trailerThumbnail {
  position: absolute;
  top: 29%; /*235px;*/
  left: 12%; /*125px;*/
  width: 84%;
  mask-image: url(trailermask.png);
  -webkit-mask-image: url(../img/story-trailer/trailer_mask.svg);
  mask-size: cover;
  -webkit-mask-size: cover;
}

#trailer .trailerArt,
#trailer .trailerArtBG {
  position: absolute;
  top: 50%;
  right: 0;
  max-width: 50%;
  pointer-events: none;
}
#trailer .trailerArt {
  transform: translate(30%, -60%);
  z-index: 2;
}
#trailer .trailerArtBG {
  transform: translate(20%, -75%);
  z-index: 0;
}

@media screen and (max-width: 768px) {
  #trailer .trailerBox {
    max-width: 100%;
  }
  .trailerBgMobile {
    display: inline;
    width: 100%;
  }
  .trailerBg {
    display: none;
  }
  #trailer .trailerHeader {
    top: -10%;
  }
  #trailer .trailerThumbnail {
    top: 8%;
    left: 5%;
    width: 90%;
  }
  .trailerArt {
    display: none;
  }
}