@media (min-width: 1700px) {
  main .card-3 .card.textContainer {
    transform-origin: right;
    left: 220px;
    right: 0px;
  }
}

@media (width: 1024px) and (height: 511px),
  (width: 1024px) and (height: 520px) {
  main {
    padding-bottom: 80px;
    overflow: visible;
  }
  main .background-video {
    width: 100%;
    object-fit: fill;
  }

  .background-video video {
    width: 100%;
    height: 100%;
  }

  .color-mask {
    width: 100%;
    height: 110%;
    object-fit: fill;
  }
}

@media (max-width: 910px) {
  html {
    background: url("../images/bg-responsive.jpg") no-repeat center center;
    background-size: cover;
  }
  main {
    overflow: visible;
    height: auto;
    padding-bottom: 50px;
  }

  main .background-video video {
    display: none;
  }

  main .background-video {
    background: url("../images/bg-responsive.jpg") no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 100%;
  }

  .color-mask {
    background-color: rgba(0, 204, 255, 0.26);
  }

  main .card-2 .card.textContainer {
    transform-origin: left;
    right: 0px;
    left: -270px;
  }
  main .card-3 .card.textContainer {
    transform-origin: right;
    left: 220px;
    right: 0px;
  }

  main .card-3 {
    margin: 0px auto;
    padding-right: 299px;
  }
}

@media (max-width: 615px) {
  main .card-3 {
    padding-right: 0px;
  }

  .card.textContainer {
    display: none;
  }

  @keyframes view-more-fading {
    from {
      filter: opacity(0) invert() blur(5px);
    }

    to {
      filter: opacity(0.8) invert() blur(0);
    }
  }

  .clicable-area:hover > .view-more {
    display: block;
    content: url("../images/view-more.png");
    position: absolute;
    width: 50px;
    filter: opacity(0.8) invert();
    right: -70px;
    top: 160px;
    animation: view-more-fading 1s;
  }

  footer h2 {
    color: white;
    font-weight: 500;
    text-shadow: 2px 2px 15px black;
  }
}