@import url(https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap);

.backdrop,
.slide {
  position: absolute
}

.featured-content,
.plot-container {
  font-family: "Noto Sans", sans-serif;
  left: 0
}

.plot,
body {
  overflow: hidden
}

body {
  margin: 0;
  padding: 0
}

.fade-in {
  opacity: 1 !important
}

.fade-out {
  opacity: 0 !important
}

#slides-container {
  height: 350px
}

.slide {
  opacity: 0;
  transition: opacity 1s ease-in-out;
  top: 0;
  left: 0;
  width: 100%;
  height: 350px
}

.slide.active {
  opacity: 1;
  z-index: 1
}

.slide:focus {
  outline: #fff solid 2px
}

.backdrop {
  right: 0;
  width: 70%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  border-radius: 5px;
  z-index: 1;
  loading: lazy
}

.logo-container {
  width: 35%;
  height: 40%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center
}

.logo {
  max-height: 80%;
  max-width: 80%;
  width: auto;
  z-index: 3;
  loading: lazy
}

.featured-content {
  position: absolute;
  top: 0;
  width: 100%;
  height: 50px;
  background-color: transparent;
  color: #d3d3d3;
  font-size: 22px;
  display: none;
  align-items: center;
  justify-content: flex-start;
  z-index: 2
}

.plot-container {
  position: absolute;
  bottom: 0;
  color: #fff;
  width: 33%;
  height: 60%;
  font-size: 15px;
  padding: 10px 0 25px 15px;
  border-radius: 5px;
  z-index: 4;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center
}

.plot {
  display: -webkit-box;
  line-clamp: 8;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical
}

.gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 70%;
  height: 100%;
  background: linear-gradient(to right, #000 49%, rgba(0, 0, 0, 0) 70%);
  z-index: 2
}

@media only screen and (max-width:767px) {
  .gradient-overlay {
    width: 100%;
    height: 68%;
    top: unset;
    bottom: 0;
    background: linear-gradient(to top, #000 49%, rgba(0, 0, 0, 0) 70%)
  }

  .backdrop {
    width: 100%
  }

  .logo-container {
    width: 50%;
    height: 35%;
    justify-content: start;
    align-items: start;
    margin: 10px
  }

  .logo {
    padding: 5px;
    background: rgba(0, 0, 0, .5);
    border-radius: 5px
  }

  .plot-container {
    padding: 10px;
    height: 35%;
    width: 100%
  }

  .plot {
    line-clamp: 4;
    -webkit-line-clamp: 4
  }
}