@property --howWeWorkColor {
    syntax: '<color>';
    inherits: true;
    initial-value: #8a8a8a;
}

.how-we-work {
    --circleDuration: 0.3s;
    --lineDuration: 1s;
    border: 1px solid #e1e1e1;
    display: grid;
    margin-top: 24px;

    @media (max-width: 755px) {
        border-radius: 24px;
        padding: 24px;
    }

    @media (min-width: 756px) {
        border-radius: 48px;
        padding: 48px;
    }

    @media (max-width: 1279px) {
        gap: 4px;
        grid-template-areas:
            "title title"
            "a-1 b-1"
            "a-2 b-2"
            "a-3 b-3"
            "a-4 b-4"
            "a-5 b-5";
        grid-template-columns: min-content 1fr;
        grid-template-rows: min-content repeat(5, 1fr);
    }

    @media (min-width: 1280px) {
        gap: 16px;
        grid-template-areas: "title title title title title" "a-1 a-2 a-3 a-4 a-5" "b-1 b-2 b-3 b-4 b-5";
		/* grid-template-columns: repeat(5, 1fr); */
		grid-template-columns: repeat(4, 1fr) min-content;
    }

    h2 {
        color: #343434;
        font-size: 48px;
        font-weight: 700;
        grid-area: title;
        letter-spacing: 0;
        line-height: 1;
        margin: 0;
        padding: 0;

        @media (max-width: 755px) {
            font-size: 24px;
            font-weight: 700;
            letter-spacing: 0.27px;
            line-height: 110%;
            margin-bottom: 32px;
        }

        @media (min-width: 756px) {
            margin-bottom: 40px;
        }
    }

    &.animated .head .line::before {
        animation-play-state: running;
    }

    .how-we-work__head {
        align-items: flex-start;
        grid-area: line;
        list-style: none;
        margin: 0;
        padding: 0;

        @media (max-width: 1279px) {
            display: flex;
            flex-direction: column;
            gap: 4px;
            justify-content: space-between;
        }

        @media (min-width: 1280px) {
            display: grid;
            gap: 16px;
            grid-template-columns: repeat(5, 1fr);
        }
    }

    .how-we-work__body {
        align-items: flex-start;
        grid-area: body;
        list-style: none;
        margin: 0;
        padding: 0;

        @media (max-width: 1279px) {
            display: flex;
            flex-direction: column;
            gap: 4px;
            justify-content: space-between;

            .how-we-work__item {
                margin-bottom: 20px;
            }
        }

        @media (min-width: 1280px) {
            display: grid;
            gap: 16px;
            grid-template-columns: repeat(5, 1fr);
        }
    }

    .how-we-work__item {
        animation: activeColor 0.15s calc((var(--index) - 1) * var(--lineDuration) + (var(--index) - 1) * var(--circleDuration)) linear forwards;
        animation-play-state: paused;
        color: var(--howWeWorkColor);
        height: 100%;
        line-height: 1.2;
        margin: 0;
        padding: 0;
        width: 100%;
		/*
        @media (max-width: 1439px) {
            &.a-5 .line {
                display: none;
            }
        }
		*/

		&.a-5 .line {
			display: none;
		}
		&.b-5 {
			white-space:nowrap;
		}
		
        .how-we-work.animated & {
            animation-play-state: running;
        }

        &::before {
            content: none;
        }

        h4 {
            font-size: 15px;
            font-weight: 500;
            margin-bottom: 0;
        }

        p {
            display: inline-flex;
            font-size: 13px;
            gap: 6px;
            margin-bottom: 0;

            svg {
                flex-shrink: 0;
            }
        }
    }

    .head {
        align-items: center;
        display: flex;
        gap: 16px;
        height: 100%;
        width: 100%;

        @media (max-width: 1279px) {
            flex-direction: column;
            gap: 4px;
        }

        @media (min-width: 1280px) {
            gap: 16px;
        }

        .icon {
            border-radius: 100rem;
            display: flex;
            flex-shrink: 0;
            margin: 0;
            outline: 2px solid #e1e1e1;
            padding: 0;

            @media (max-width: 1279px) {
                height: 32px;
                width: 32px;
            }

            @media (min-width: 1280px) {
                height: 48px;
                width: 48px;
            }

            .how-we-work.animated & {
                outline-color: rgba(0, 0, 0, 0);
                transition: outline-color 0.15s calc((var(--index) - 1) * var(--lineDuration) + (var(--index) - 1) * var(--circleDuration)) ease-in-out;
            }

            svg {
                animation: opacity var(--circleDuration) calc((var(--index) - 1) * var(--lineDuration) + (var(--index) - 1) * var(--circleDuration)) ease-in-out forwards;
                animation-play-state: paused;
                height: 100%;
                opacity: 0;
                width: 100%;

                .how-we-work.animated & {
                    animation-play-state: running;
                }
            }
        }

        .line {
            background-color: #f0f3f4;
            border-radius: 1px;
            position: relative;

            @media (max-width: 1279px) {
                height: 100%;
                width: 2px;
            }

            @media (min-width: 1280px) {
                height: 2px;
                width: 100%;
            }

            @media (min-width: 1280px) and (max-width: 1439px) {
                margin-right: -15px;
            }

            &::before {
                background-color: #1fa483;
                border-radius: 1px;
                content: "";
                left: 0;
                position: absolute;
                top: 0;

                @media (max-width: 1279px) {
                    animation: lineFillHeight var(--lineDuration) calc((var(--index) - 1) * var(--lineDuration) + var(--index) * var(--circleDuration)) linear forwards;
                    animation-play-state: paused;
                    width: 100%;
                }

                @media (min-width: 1280px) {
                    animation: lineFillWidth var(--lineDuration) calc((var(--index) - 1) * var(--lineDuration) + var(--index) * var(--circleDuration)) linear forwards;
                    animation-play-state: paused;
                    height: 100%;
                }
            }
        }
    }

    .body {
        display: grid;
        gap: 12px;
    }

    .a-1 {
        grid-area: a-1;
    }

    .a-2 {
        grid-area: a-2;
    }

    .a-3 {
        grid-area: a-3;
    }

    .a-4 {
        grid-area: a-4;
    }

    .a-5 {
        grid-area: a-5;
    }

    .b-1 {
        grid-area: b-1;
    }

    .b-2 {
        grid-area: b-2;
    }

    .b-3 {
        grid-area: b-3;
    }

    .b-4 {
        grid-area: b-4;
    }

    .b-5 {
        grid-area: b-5;
    }
}

@keyframes opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes activeColor {
    0% {
        --howWeWorkColor: #8a8a8a;
    }
    100% {
        --howWeWorkColor: #343434;
    }
}

@keyframes lineFillHeight {
    0% {
        height: 0;
    }
    100% {
        height: 100%;
    }
}

@keyframes lineFillWidth {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}