.hero-slider {
      position: relative;
      height: 100vh;
      max-width: 100%;
      display: grid;
      opacity: 1;

  }

  .hero-slider.off {


      opacity: 0;
      display: none;

  }

  .hero-slider .slide {
      display: none;
      overflow: hidden;
      min-width: 100%;
      height: 100%;
      background-position: center center;
      background-size: cover;
      background-repeat: no-repeat;
      z-index: 0;


  }

  .hero-slider .slide.active {
      animation: 5s myMoveHero 0s, 5s myMoveOffHero 5s;
      box-shadow: 0 0 30px 5px whitesmoke;
      display: block;


  }

  .hero-content {
      position: absolute;
      min-height: 100%;
      width: 100%;
      padding: 100px 20vw 0;
      display: grid;
      grid-template-rows: 1fr auto 50px 1fr;
      place-items: center center;
      text-align: center;
      color: var(--color-light);
      background: linear-gradient(45deg, rgba(0 0 0 / 0.4));
      z-index: 1;
  }

  @keyframes myMoveOffHero {
      from {
          opacity: 100%;

      }

      to {
          opacity: 10%;
      }
  }

  @keyframes myMoveHero {
      from {
          opacity: 0%;

      }

      to {
          opacity: 100%;
      }
  }

  .hero-content p {
      font-size: 1.5em;
  }

  .cta-button {
      display: inline-block;
      color: var(--color-light);
      padding: 10px 10px;
      background: var(--color-red);
      text-decoration: none;
      border-radius: 8px;

      transition: all 0.9s linear(0 0%, 0 2.27%, 0.02 4.53%, 0.04 6.8%, 0.06 9.07%, 0.1 11.33%, 0.14 13.6%, 0.25 18.15%, 0.39 22.7%, 0.56 27.25%, 0.77 31.8%, 1 36.35%, 0.89 40.9%, 0.85 43.18%, 0.81 45.45%, 0.79 47.72%, 0.77 50%, 0.75 52.27%, 0.75 54.55%, 0.75 56.82%, 0.77 59.1%, 0.79 61.38%, 0.81 63.65%, 0.85 65.93%, 0.89 68.2%, 1 72.7%, 0.97 74.98%, 0.95 77.25%, 0.94 79.53%, 0.94 81.8%, 0.94 84.08%, 0.95 86.35%, 0.97 88.63%, 1 90.9%, 0.99 93.18%, 0.98 95.45%, 0.99 97.73%, 1 100%);
  }

  .cta-button:hover {
      scale: 1.1;
  }