@import "@/styles/mixins.scss";
@import "@/styles/variables.scss";

.introduction {
  color: #FFF;
  word-break: break-word;
  min-height: 25rem;
  padding: 5.5rem 0 1rem 0;

  h1 {
    margin-top: 3.25rem;
  }

  h5 {
    color: rgba($white, 80%);
    @include h5();
    max-width: 61rem;
    margin-top: 1rem;
  }
}

[data-role="campus"] [data-role="background"].introduction:after {
  background: linear-gradient(93.24deg, #EB4925 0%, rgba(239, 164, 51, 0.6) 100%);
}

[data-role="lecturer"] [data-role="background"].introduction:after {
  background: linear-gradient(93.13deg, #7D3F98 0%, rgba(186, 57, 142, 0.6) 99.34%);
}

[data-role="science"] [data-role="background"].introduction:after {
  background: linear-gradient(93.24deg, #3D3FEA 0%, rgba(51, 171, 239, 0.6) 100%);
}

@media screen and (min-width: $desktop) and (max-width: $wide) {
  .introduction h5 {
    max-width: 90%;
  }
}

@media screen and (max-width: 767px) {
  .introduction {
    h1 {
      margin-top: 1rem;
    }

    h5 {
      max-width: 96%;
    }
  }
}