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: -40px;
        padding: 0 32px 0 0;
        width: 90%;
      }

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

    .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: -40px;
        padding: 0 0 0 32px;
        width: 90%;
      }

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

  &--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 32px;
    }

    &__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(--brand-main-active);
        color: var(--grayscale-white);

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

    &__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(--brand-main-light);
        color: var(--grayscale-white);

        &__icon svg {
          fill: 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: 91.46%;
    }
    @include breakpoint($extrawide) {
      width: 82.89%;
    }
    @include breakpoint($overwide) {
      width: 74.2%;
    }
  }

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

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

    @include breakpoint($wide) {
      margin: 0;
      padding: 0;
      //width: calc(100% / 12 * 6);
      width: 45.73%;
    }
  }

  &__title {
    .hy-heading__container {
      @include breakpoint($wide) {
        padding-top: 0;
      }
    }
  }

  &__image {
    width: 100%;

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

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

      --aspectRatio: 66.5% !important;
      @include breakpoint($wide) {
        --aspectRatio: 71.42857142857143% !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($narrow) {
      @include font-size(18px, 28px);
    }

    @include breakpoint($wide) {
      @include font-size(18px, 28px);
      margin-bottom: 32px;
    }
    @include breakpoint($extrawide) {
      margin-bottom: 32px;
    }
    @include breakpoint($overwide) {
      margin-bottom: 40px;
    }
  }

  &__link {
    @include font-size(16px, 20px);
    letter-spacing: -0.5px;

    background-color: var(--brand-main-light);
    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: 700;
    height: 100%;
    padding: 12px 60px 12px 12px;
    position: relative;
    text-decoration: none;

    @include breakpoint($medium) {
      @include font-size(16px, 20px);
      letter-spacing: -0.6px;
      padding: 15px 62px 15px 16px;
    }

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

    @include breakpoint($extrawide) {
      @include font-size(20px, 20px);
      letter-spacing: -0.7px;
      padding: 16px 70px 16px 18px;
    }

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

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

// Desktop screens without side nav bar.
.hy-introduction.large {
  .hy-introduction__description {
    @include breakpoint($extrawide) {
      //font Ingress Large
      margin-bottom: 40px;
    }
    @include breakpoint($overwide) {
      //font Ingress Large
      margin-bottom: 40px;
    }
  }
}