:host { display: block; } .hy-process-flow-box { height: calc(100% - 32px); position: relative; &__step__container { bottom: unset; display: grid; height: 82px; place-items: center; position: absolute; top: -35px; width: 138px; z-index: 1; @include breakpoint($medium) { bottom: -62px; display: grid; height: 60px; top: unset; width: 210px; } svg polygon { fill: var(--grayscale-background-arrow); } svg.mobile { display: block; @include breakpoint($medium) { display: none; } } svg.desktop { display: none; @include breakpoint($medium) { display: block; } } } .first.even.hy-process-flow-box__step__container { left: calc(50% - 69px + 16px); @include breakpoint($medium) { left: -90px; } @include breakpoint($wide) { left: 0; } } .first.odd.hy-process-flow-box__step__container { left: calc(50% - 69px + 16px); @include breakpoint($medium) { left: 0; } } :not(.first).even.hy-process-flow-box__step__container { left: calc(50% - 69px + 16px); @include breakpoint($medium) { left: -90px; } } :not(.first).odd.hy-process-flow-box__step__container { left: calc(50% - 69px + 16px); @include breakpoint($medium) { left: 0; } @include breakpoint($wide) { left: -90px; } } &__step { background-color: transparent; color: var(--grayscale-black); font-family: var(--main-font-family); font-size: 16px; font-weight: 600; letter-spacing: 0; line-height: 22px; padding: 19px 17px; position: absolute; text-align: center; z-index: 11; @include breakpoint($medium) { left: 0; max-width: 175px; padding: 8px 23px 8px 14px; } } &__number__container { display: grid; height: 64px; 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); font-size: 36px; font-weight: 600; height: 48px; letter-spacing: 0; line-height: 49px; margin: 0; padding: 0; place-items: center; position: relative; width: 48px; &::after { content: ''; height: 48px; left: -6px; position: absolute; width: 48px; } } &__content.small { padding: 16px 32px; padding-bottom: 64px; @include breakpoint($wide) { padding: 20px; padding-bottom: 64px; } } &__content.big { padding: 24px 32px; padding-bottom: 64px; } &__content { background-color: var(--grayscale-background-box); height: 100%; margin-left: 32px; margin-top: -32px; position: relative; } &__title { color: var(--brand-main-nearly-black); font-family: var(--main-font-family); font-size: 26px; font-weight: 600; letter-spacing: -0.82px; line-height: 32px; margin-bottom: 16px; margin-top: 0; } &__description { color: var(--grayscale-dark); font-family: var(--main-font-family); font-size: 16px; letter-spacing: 0; line-height: 24px; } } .small.hy-process-flow-box { .small.hy-process-flow-box__number__container { height: 56px; width: 56px; .hy-process-flow-box__number { font-size: 28px; height: 40px; line-height: 40px; width: 40px; } } }