@import "../../../settings/all";
@import "../../../tools/all";
@import "../../../helpers/all";
@import "../_partials/gradient-background";

@include govuk-exports("govuk/sdn/component/hero") {
  // todo replace colors from global variables
  $from: #2e3ac7;
  $to: #448bef;
  $hero-text-color: govuk-colour("white");

  .sdn-hero {
    background: linear-gradient(90deg, $from 0%, $to 100%);
  }

  .sdn-hero-inner {
    padding: 3rem 0;
    background: url("/assets/images/icon-ajjasom.svg") right -70px no-repeat;
    background-size: 500px;
  }

  .sdn-hero-text {
    max-width: 60%;
  }

  .snd-hero-title,
  .snd-hero-description {
    color: $hero-text-color;
  }

  @media (max-width: 768px) {
    .sdn-hero-inner {
      padding: 1.5rem 0;
      background: none;
    }

    .sdn-hero-text {
      max-width: 80%;
    }

    .snd-hero-title {
      margin-bottom: 1rem;
      font-size: 2rem;
      line-height: 2.4rem;
    }

    .snd-hero-description {
      margin-bottom: .5rem;
      font-size: 1rem;
      line-height: 1.4rem;
    }
  }
}