hy-hero.scss

:host {
  display: block;
}

.hy-hero {
  position: relative;

  @include breakpoint($wide) {
    display: flex;
    margin: 32px 0 56px 0;
  }

  &__image-container {
    background: transparent;
    background-position: 50% 50%;
    background-size: cover;
    position: relative;

    @include breakpoint($wide) {
      background: white;
      margin-left: 30%;
      min-height: 600px;
      padding: 6px 0;
      order: 2;
      width: auto;
      z-index: 1;
    }

    img.hy-image__image {
      height: 100%;
      min-height: 205px;
      object-fit: cover;
      width: 100%;
    }
  }

  &__content {
    position: relative;

    margin-top: -32px;
    min-height: 32px;
    max-width: 100px;

    @include breakpoint($medium) {
      margin-top: -48px;
      min-height: 48px;
      max-width: 100px;
    }

    @include breakpoint($wide) {
      display: none;
    }

    &-wrap-helper {
      margin-top: -32px;
      position: relative;

      @include breakpoint($medium) {
        margin-top: -48px;
      }

      @include breakpoint($wide) {
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: center;
        left: 0;
        margin: 0;
        order: 1;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 2;
      }
    }
  }

  &--blue {
    background-color: var(--brand-main-light);

    .hy-hero__content,
    .hy-hero__title,
    .hy-hero__description {
      background-color: var(--brand-main-light);
    }

    .hy-hero__content--bottom {
      background-color: var(--brand-main-light);

      @include breakpoint($wide) {
        background-color: transparent;
      }
    }
  }

  &--black {
    background-color: var(--grayscale-black);

    .hy-hero__content,
    .hy-hero__title,
    .hy-hero__description,
    .hy-hero__cta-link__container {
      background-color: var(--grayscale-black);
      color: var(--grayscale-white);
    }

    .hy-hero__content--bottom {
      background-color: var(--grayscale-black);

      @include breakpoint($wide) {
        background-color: transparent;
      }
    }
  }

  &--white {
    background-color: var(--grayscale-white);

    .hy-hero__content,
    .hy-hero__title,
    .hy-hero__description,
    .hy-hero__cta-link__container {
      background-color: var(--grayscale-white);
      color: var(--grayscale-black);
    }

    .hy-hero__cta-link {
      border-color: var(--grayscale-black);

      &__icon svg {
        fill: var(--grayscale-black);
      }
    }

    .hy-hero__content--bottom {
      background-color: var(--grayscale-white);

      @include breakpoint($wide) {
        background-color: transparent;
      }
    }
  }

  &__title {
    @include font-size(32px, 32px);

    color: var(--grayscale-white);
    font-family: var(--main-font-family);
    font-weight: bold;
    hyphens: auto;
    letter-spacing: -1.88px;
    margin-top: -32px;
    max-width: 80%;
    padding: 32px 32px 0 0;
    text-transform: uppercase;
    z-index: 2;

    @include breakpoint($medium) {
      @include font-size(48px, 54px);
      margin-top: -48px;
      padding: 48px 40px 0 0;
    }

    @include breakpoint($wide) {
      @include font-size(60px, 60px);

      margin: 0;
      max-width: 56.94%;
      padding: 24px 24px 0 0;
      width: fit-content;
    }
  }

  &__description {
    @include font-size(16px, 20px);

    color: var(--grayscale-white);
    font-family: var(--main-font-family);
    font-weight: 600;
    letter-spacing: -0.1px;
    padding: 24px 24px 32px 0;

    @include breakpoint($narrow) {
      padding: 28px 24px 40px 0;
    }

    @include breakpoint($wide) {
      @include font-size(18px, 24px);

      line-height: 32px;
      max-width: 48.33%;
      width: fit-content;
    }
  }

  &__cta-link {
    @include font-size(16px);

    align-items: center;
    background-color: transparent;
    border: 2px solid var(--grayscale-white);
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    color: inherit;
    cursor: pointer;
    display: flex;
    font-family: var(--main-font-family);
    font-weight: 600;
    height: 100%;
    justify-content: center;
    padding: 8px 12px 8px 12px;
    position: relative;
    text-decoration: none;

    @include breakpoint($wide) {
      @include font-size(18px);

      padding: 16px 24px 16px 24px;
    }

    &__icon {
      margin-left: 1rem;

      svg {
        fill: var(--grayscale-white);
      }
    }

    &__container {
      background-color: var(--brand-main-light);
      color: var(--grayscale-white);
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      max-width: 320px;
      padding: 32px 0 40px 0;
      width: fit-content;

      @include breakpoint($narrow) {
        padding: 0 24px 48px 0;
      }

      @include breakpoint($wide) {
        align-self: flex-start;
        padding: 0 24px 56px 0;
      }
    }
  }
}