:root {
    --big-number-width: calc(4rem + 14vw);
}

.blue-arrow {
    height: 300px;
    width: 100px;
    -webkit-animation: stretch 3s ease-in-out infinite alternate;
            animation: stretch 3s ease-in-out infinite alternate;
    border: 1px solid red;
}

.stretchy {
    height: calc(100% - 20px);
    width: 100%;
}

.steps {
    margin-top: 4vw;
    margin-bottom: 5vw;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--big-number-width) 1fr var(--big-number-width) minmax(0, 1fr);
    grid-template-rows: var(--big-number-width) auto 5vw var(--big-number-width) auto 5vw var(--big-number-width) auto 5vw var(--big-number-width) auto;
    grid-template-areas:
        ".      num1  step1 step1 arrow1"
        ".      .     step1 step1 arrow1"
        ".      .     .     .     arrow1"
        "arrow2 step2 step2 num2  arrow1"
        "arrow2 step2 step2 .     ."
        "arrow2 .     .     .     .     "
        "arrow2 num3  step3 step3 arrow3"
        ".      .     step3 step3 arrow3"
        ".      .     .     .     arrow3"
        ".      step4 step4 num4  arrow3"
        ".      step4 step4 .     .     ";
}

.step1 {
    grid-area: step1;
}

.step2 {
    grid-area: step2;
}

.step3 {
    grid-area: step3;
}

.step4 {
    grid-area: step4;
}

.num1 {
    grid-area: num1;
}

.num2 {
    grid-area: num2;
}

.num3 {
    grid-area: num3;
}

.num4 {
    grid-area: num4;
}

.arrow-vertical,
.mobile-heading {
    display: none;
}

.step2,
.step3,
.step4,
.arrow,
.number-circle:not(.num1),
.mobile-heading:not(.heading1),
.text::before {
    opacity: 0;
}

.step2.active,
.step3.active,
.step4.active,
.arrow.active,
.number-circle.active,
.mobile-heading.active,
.text.show-arrow::before {
    transition: opacity 1s ease-in-out;
    opacity: 1;
}

.number-circle {
    position: relative;
    align-self: start;
    box-sizing: border-box;
    min-width: var(--big-number-width);
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1;
    color: var(--blue);
    border-radius: 50%;
    background: url(/assets/Stone-texture-ghosted.png);
    font-size: calc(1em + 1.1vw);
    text-transform: uppercase;
    text-shadow: 0.09em 0.09em 0.18em rgba(0, 0, 0, 0.5);
    font-weight: 800;
    letter-spacing: 0.18em;
    z-index: 2;
}

.text {
    position: relative;
    margin-left: calc(4vw - 1em);
    z-index: 1;
}

.text-left {
    margin-left: 0;
    margin-right: calc(4vw - 1em);
}

.big-number {
    position: relative;
    font: normal 4.4em 'Arima', cursive;
}

.text::before {
    position: absolute;
    content: '';
    top: calc(calc(var(--big-number-width) / 2) - 1em);
    left: -4vw;
    width: calc(100% + 6vw);
    height: 2em;
    background-color: var(--faint-blue);
    z-index: -1;
}

.step4.text::before {
    content: none;
}

.text-left::before {
    left: unset;
    right: -4vw;
}

.show-arrow .text::before {
    transition: opacity 1s ease-in-out;
    opacity: 1;
}

.text p {
    line-height: 1.8;
}

.arrow {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding-top: calc(calc(var(--big-number-width) / 2) - 3.7em);
    padding-bottom: calc(calc(var(--big-number-width) / 2) - 3.7em);
    padding-left: calc(4vw - 2em);
}

.arrow-ext {
    margin-left: 11.06em;
    width: 2em;
    height: 100%;
    background-color: var(--faint-blue);
}

.arrow1 {
    grid-area: arrow1;
}

.arrow2 {
    position: relative;
    top: 0.02em;
    grid-area: arrow2;
    transform: rotateY(180deg);
}

.arrow3 {
    grid-area: arrow3;
}

.arrow-curve {
    width: 13.05em;
}

.arrow-point {
    width: 13.05em;
}

@media (max-width: 1040px) {
    :root {
        --big-number-width: calc(4rem + 16vw);
    }

    .arrow-curve,
    .arrow-point {
        display: none;
    }

    .steps {
        grid-template-columns: var(--big-number-width) auto;
        grid-template-rows: var(--big-number-width) auto var(--big-number-width) auto var(--big-number-width) auto var(--big-number-width) auto;
        grid-template-areas:
            "num1   step1"
            "arrow1 step1"
            "num2   step2"
            "arrow2 step2"
            "num3   step3"
            "arrow3 step3"
            "num4   step4"
            ".      step4";
        padding: 0 4vw;
    }

    .number-circle {
        font-size: calc(0.6em + 1.8vw);
    }

    .text,
    .text-left {
        margin-left: calc(5vw - 0.6em);
        margin-right: 0;
        margin-bottom: 3em;
    }

    .text.show-arrow::before {
        transition: none;
        opacity: 0;
    }

    .arrow {
        position: relative;
        padding: 0;
        align-items: center;
        top: -0.8em;
    }

    .arrow-ext {
        margin-left: 0;
        width: 21px;
    }

    .arrow-vertical {
        display: block;
        width: 77px;
    }
}

@media (max-width: 536px) {
    :root {
        --big-number-width: calc(6.5rem + 8vw);
    }

    .steps {
        grid-template-areas:
            "num1  heading1"
            "step1 step1   "
            "num2  heading2"
            "step2 step2   "
            "num3  heading3"
            "step3 step3   "
            "num4  heading4"
            "step4 step4   ";
        margin-top: 6vw;
        margin-bottom: 0;
    }

    .number-circle {
        font-size: calc(0.8em + 1.4vw);
    }

    .arrow1 {
        grid-area: 2 / 1 / 3 / 2;
    }

    .arrow2 {
        grid-area: 4 / 1 / 5 / 2;
    }

    .arrow3 {
        grid-area: 6 / 1 / 7 / 2;
    }

    .text,
    .text-left {
        margin-left: 0;
        margin-top: 0.75em;
        margin-bottom: 4em;
    }

    .text h3 {
        display: none;
    }

    .mobile-heading {
        display: block;
        margin-left: 3vw;
        align-self: center;
        margin-bottom: 0;
        font-size: 1.8em;
    }
}