.tutorial__main-content {
  align-items: center;
  margin-top: 0;
}

.tutorial__hero {
  position: relative;
}

.tutorial__hero-carousel {
  height: 45vh;
}

.tutorial__hero-content {
  position: absolute;
  max-width: 800px;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 3rem 2rem;
  color: white;
  width: 100%;
}

.tutorial__hero-content h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  word-wrap: break-word;
}

.tutorial__tabs,
.tutorial__steps,
.tutorial__step-image {
  max-width: 800px;
}

.tutorial__tabs {
  padding: 0 1rem;
  margin-top: 2rem;
}

.tutorial__steps {
  margin: 0 auto;
  padding: 3rem 2rem;
}

.tutorial__step {
  margin-bottom: 2rem;
}

.tutorial__step h2,
.tutorial__devices h2 {
  color: #4a4a4a;
  margin-bottom: 1rem;
}

.tutorial__step p {
  line-height: 1.3rem;
  text-align: justify;
}

.tutorial__step-image {
  width: 100%;
  margin-top: 1rem;
  border-radius: 10px;
}

.tutorial__step .tutorial__step-button {
  margin: 1.5rem auto;
}

.tutorial__vpn-link {
  color: #000000;
  text-decoration: underline;
}

.tutorial__devices {
  margin-top: 3rem;
}

.tutorial__video-wrapper {
  position: relative;
  height: auto;
  overflow: hidden;
  max-width: 100%;
  border-radius: 1rem;
}

.tutorial__video-wrapper::before {
  display: block;
  content: "";
}

.tutorial__video-wrapper--smartphone::before {
  /* Opening the iFrame in a new tab, will show that the video has a \
       1441.77/1002 ratio, so (1002/1441.77)*100 = 69.49% */
  padding-top: 69.49%;
}

.tutorial__video-wrapper--computer::before {
  /* Opening the iFrame in a new tab, will show that the video has a \
       2201.18/1472 ratio, so (1472/2201.18)*100 = 66.87% */
  padding-top: 66.87%;
}

.tutorial__video-wrapper--smart-tv::before {
  padding-top: 66.87%;
}

.tutorial__video-wrapper iframe,
.tutorial__video-wrapper object,
.tutorial__video-wrapper embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 965px) {
  .tutorial__hero-content {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    bottom: 2rem;
  }

  .tutorial__hero-content h1 {
    font-size: 2rem;
  }

  .tutorial__hero-content p {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .tutorial__hero-carousel {
    height: 55vh;
  }

  .tutorial__hero-content h1 {
    font-size: 1.75rem;
  }

  .tutorial__steps {
    padding: 2rem 1.5rem;
  }

  .tutorial__step h2 {
    font-size: 1.5rem;
  }
}

@media (prefers-color-scheme: dark) {
  .tutorial__step h2 {
    color: #f8f9fa;
  }

  .tutorial__step p {
    color: #dee2e6;
  }

  .tutorial__devices h2 {
    color: #f8f9fa;
  }

  .tutorial__devices h3,
  .tutorial__devices p {
    color: #dee2e6;
  }

  .tutorial__vpn-link {
    color: #228be6;
  }
}

.tutorial__content {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

.tutorial__content[style*="display: none"] {
  opacity: 0;
}