.process .container__inner {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.process__header {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.process__main {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-md);
    align-items: end;
}

.process__step {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--color-bg-badge);
    padding: calc(var(--pixel) * 20);
    position: relative;
}

.process__step:nth-child(1) {
    height: calc(var(--pixel) * 350);
}

.process__step:nth-child(2) {
    height: calc(var(--pixel) * 450);
}

.process__step:nth-child(3) {
    height: calc(var(--pixel) * 550);
}

.process__step .h3 {
    color: var(--color-solar-gold);
}

.process__step__content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
}

.process__badge {
    position: absolute;
    right: calc(var(--pixel) * 20);
    top: calc(var(--pixel) * 20);
    padding: calc(var(--pixel) * 10);
}

@media (max-width: 1439px) {
    .process .container__inner {
        gap: 45px;
    }

    .process__header {
        gap: 20px;
    }

    .process__main {
        grid-template-columns: repeat(1, 1fr);
        align-items: start;
    }

    .process__step {
        gap: calc(var(--pixel) * 45);
    }

    .process__step:nth-child(1) {
        height: auto;
    }

    .process__step:nth-child(2) {
        height: auto;
    }

    .process__step:nth-child(3) {
        height: auto;
    }
}

@media (max-width: 767px) {
    .process .container__inner {
        gap: 35px;
    }

    .process__header {
        gap: 20px;
    }

    .process__step .h3 {
        font-size: calc(var(--pixel) * 35);
    }
    .process__step .h4 {
        font-size: calc(var(--pixel) * 25);
    }

    .process__step:nth-child(1) {
        height: calc(var(--pixel) * 365);
    }

    .process__step:nth-child(2) {
        height: calc(var(--pixel) * 365);
    }

    .process__step:nth-child(3) {
        height: calc(var(--pixel) * 365);
    }
}
