hy-large-process-flow-phase.scss

:host {
  display: block;
}

.hy-large-process-flow__phase-container {
  padding-left: 0;
  position: relative;
  max-width: 100%;
  width: 100%;

  @include breakpoint($narrow) {
    //tablet
    padding-left: calc(100% / 8 + var(--gutter-narrow)); // 1 column padding
  }
  @include breakpoint($medium + 1) {
    //small desktop
    padding-left: calc(100% / 12 + var(--gutter-medium)); // 1 column padding
  }
  @include breakpoint($wide) {
    //mid desktop
    padding-left: calc(100% / 12 + var(--gutter-wide)); // 1 column padding
  }
  @include breakpoint($extrawide) {
    //large desktop
    padding-left: calc(100% / 12 + var(--gutter-extrawide)); // 1 column padding
  }

  &__phase {
    position: relative;

    &:after {
      background-color: var(--grayscale-background-arrow);
      bottom: 0;
      content: ' ';
      display: inline-block;
      height: 24px;
      left: 26.5px;
      position: absolute;
      width: 8px;

      @include breakpoint($narrow) {
        display: inline-block;
        height: 100%;
      }
    }

    &:last-child:after {
      display: none;

      @include breakpoint($narrow) {
        display: inline-block;
      }
    }

    &:last-child &__content {
      top: 0;
      margin-top: -24px;
    }

    &__number {
      display: grid;
      place-items: center;
      position: relative;
      width: 64px;
      z-index: 2;

      &__number {
        background-color: var(--brand-main-light);
        color: var(--grayscale-white);
        display: grid;
        font-family: var(--main-font-family);
        @include font-size(32px, 36px);
        @include font-weight(700);
        height: 48px;
        letter-spacing: 0;
        margin: 0;
        padding: 0;
        place-items: center;
        position: relative;
        width: 48px;

        &::after {
          content: '';
          height: 48px;
          left: -6px;
          position: absolute;
          width: 48px;
        }

        @include breakpoint($narrow) {
          @include font-size(36px, 40px);
          height: 64px;
          width: 64px;

          &::after {
            content: '';
            height: 64px;
            left: -6px;
            position: absolute;
            width: 64px;
          }
        }
      }
    }

    &__content {
      background-color: var(--grayscale-background-box);
      margin: 0 -56px;
      padding: 48px 0 24px 0;
      position: relative;
      top: -24px;

      @include breakpoint($narrow) {
        //margin-bottom: -8px;
        //margin-left: 32px;
        margin: 0 0 -8px 32px;
        padding: 32px 0;
        top: -32px;
      }

      &__heading {
        color: var(--brand-main-nearly-black);
        font-family: var(--main-font-family);

        @include font-size(20px, 30px);
        @include font-weight(600);
        letter-spacing: -0.5px;
        margin-bottom: 24px;
        //padding: 0 16px;
        padding: 0 56px;

        @include breakpoint($narrow) {
          @include font-size(26px, 30px);
          @include font-weight(700);
          letter-spacing: -0.65px;
          padding: 0 44px;
        }
      }

      &__description {
        color: var(--grayscale-dark);
        font-family: var(--main-font-family);

        @include font-size(16px, 24px);
        letter-spacing: 0;
        margin-bottom: 24px;
        //padding: 0 16px;
        padding: 0 56px;

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

      &__links {
        align-items: flex-end;
        display: flex;
        flex-direction: column;
        margin-right: 0;
        padding: 0 56px;

        @include breakpoint($narrow) {
          margin-right: -6px;
          padding: 0;
        }

        .phase-link {
          margin-bottom: 8px;
        }
        .phase-link.last {
          margin-bottom: 0;
        }
      }
    }
  }
}