hy-introduction.scss

:host {
  display: block;
}

.hy-introduction {
  &--reversed {
    .hy-introduction__outer-content {
      align-items: flex-end;
      flex-direction: column-reverse;

      @include breakpoint($wide) {
        align-items: stretch;
        flex-direction: row-reverse;
      }
    }
  }

  &--without-bg {
    .hy-introduction__content--with-image {
      background: var(--grayscale-white);
      margin-top: 0;
      margin-left: 0;
      padding: 0;
      width: 100%;
      z-index: 1;

      @include breakpoint($narrow) {
        box-shadow: 10px -10px 20px -10px rgba(14, 104, 139, 0.1);
        margin-top: -83px;
        padding: 0 32px 0 0;
        width: 90%;
      }

      @include breakpoint($wide) {
        box-shadow: none;
        margin-top: 0;
        padding: 0 32px 0 0;
      }
    }

    .hy-introduction__content--reversed.hy-introduction__content--with-image {
      box-shadow: none;
      margin-top: 0;
      margin-left: 0;
      padding: 0;

      @include breakpoint($narrow) {
        box-shadow: -10px -10px 20px -10px rgba(14, 104, 139, 0.1);
        margin-top: -83px;
        padding: 0 0 0 32px;
        width: 90%;
      }

      @include breakpoint($wide) {
        box-shadow: none;
        margin-top: 0;
        padding: 0 0 0 32px;
      }
    }
  }

  &--with-bg {
    width: auto;

    @include breakpoint($wide) {
      padding: 56px 0 56px 0;
    }

    @include breakpoint($extrawide) {
      padding: 72px 0 72px 0;
    }

    @include breakpoint($overwide) {
      padding: 80px 0 80px 0;
    }

    &__blue {
      background: transparent;

      @include breakpoint($wide) {
        background: linear-gradient(90deg, var(--brand-main-light) 90%, var(--grayscale-white) 50%);
      }

      @include breakpoint($extrawide) {
        background: linear-gradient(90deg, var(--brand-main-light) 85%, var(--grayscale-white) 50%);
      }

      .hy-introduction__content--with-image {
        background: var(--brand-main-light);
      }

      .hy-introduction__title h2,
      .hy-introduction__description {
        color: var(--grayscale-white);
      }

      .hy-introduction__link {
        background: var(--grayscale-white);
        color: var(--brand-main-light);

        &__icon svg {
          fill: var(--brand-main-light);
        }
      }
    }

    &__black {
      background: transparent;

      @include breakpoint($wide) {
        background: linear-gradient(90deg, var(--grayscale-black) 90%, var(--grayscale-white) 50%);
      }

      @include breakpoint($extrawide) {
        background: linear-gradient(90deg, var(--grayscale-black) 85%, var(--grayscale-white) 50%);
      }

      .hy-introduction__content--with-image {
        background: var(--grayscale-black);
      }

      .hy-introduction__title h2,
      .hy-introduction__description {
        color: var(--grayscale-white);
      }

      .hy-introduction__link {
        background: var(--grayscale-black);
        color: var(--grayscale-white);
      }
    }
  }

  &__outer-content {
    display: flex;
    flex-direction: column-reverse;
    flex: 1 1 auto;
    justify-content: space-between;

    @include breakpoint($wide) {
      flex-direction: row;
      justify-content: space-between;
      padding-bottom: 0;
    }
  }

  &__content--without-image {
    width: 100%;

    @include breakpoint($wide) {
      width: calc(100% / 12 * 10 - var(--gutter-medium));
    }
  }

  &__content--with-image {
    margin-left: -16px;
    margin-top: -60px;
    padding: 60px 16px 32px;
    width: calc(100% + 32px);

    @include breakpoint($narrow) {
      margin-left: -32px;
      padding: 60px 32px 32px;
      width: calc(100% + 64px);
    }

    @include breakpoint($wide) {
      margin: 0;
      padding: 0;
      width: calc(100% / 12 * 6);
    }
  }
  &__title {
    .hy-heading__container {
      @include breakpoint($wide) {
        padding-top: 0;
      }
    }
  }

  &__image {
    width: 100%;

    @include breakpoint($wide) {
      width: calc(100% / 12 * 5 - var(--gutter-medium));
    }

    .hy-image,
    .hy-image .hy-image__image-container {
      height: 100% !important;
    }
  }

  &__description {
    @include font-size(16px, 24px);
    @include font-weight($semibold);

    color: var(--grayscale-black);
    font-family: var(--main-font-family);
    letter-spacing: -0.1px;
    margin-bottom: 28px;

    @include breakpoint($medium) {
      @include font-size(18px, 28px);
      margin-bottom: 38px;
    }

    @include breakpoint($wide) {
      @include font-size(20px, 32px);
      margin-bottom: 48px;
    }
  }

  &__link {
    @include font-size(18px);

    background-color: var(--brand-main-light);
    border: 2px solid var(--grayscale-white);
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    color: var(--grayscale-white);
    cursor: pointer;
    display: inline-block;
    font-family: var(--main-font-family);
    font-weight: 600;
    height: 100%;
    padding: 16px 70px 16px 19px;
    position: relative;
    text-decoration: none;

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

    &__icon {
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);

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