.stage {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 30px;
}

.stage__link-element {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.stage__link {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
}

.stage__link span {
    color: var(--color-main);
    text-transform: uppercase;
}

.stage__link svg path {
    fill: var(--color-main);
}

.stage__content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 250px), 250px));
    grid-template-rows: auto;
    row-gap: 10px;
}

.stage__item {
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px 40px;
    margin: 0 -6px;
    background-color: transparent;
}

.stage__item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-main-light);
    clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%, 10% 50%);
    z-index: -1;
}

.stage__item:first-child::before{
    clip-path: polygon(
            0% 0%,
            90% 0%,
            100% 50%,
            90% 100%,
            0% 100%,
            0% 50%
    );
}

.stage__item:last-child::before{
    clip-path: polygon(
            0% 0%,
            100% 0%,
            100% 50%,
            100% 100%,
            0% 100%,
            10% 50%
    );
}

.stage__item-icon {
    position: relative;
}

.stage__item-icon svg path {
    fill: var(--color-main);
}

.stage__item-subtitle {
    color: var(--color-main);
}

.stage__item-text {
    display: flex;
    flex-direction: column;
}

@media (max-width: 991px) {
    .stage__content {
        grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
        row-gap: 10px;
    }

    .stage__item::before {
        gap: 10px;
        clip-path: polygon(
                0% 0%,
                90% 0%,
                100% 50%,
                90% 100%,
                0% 100%,
                5% 50%
        );
    }

    .stage__item::before:last-child{
        clip-path: polygon(
                0% 0%,
                100% 0%,
                100% 50%,
                100% 100%,
                0% 100%,
                5% 50%
        );
    }
}

@media (max-width: 768px) {
    .stage {
        gap: 15px;
    }
}