.order-steps {
    padding-top: 48px;
    padding-bottom: 96px;
}
.order-step {
    background-color: var(--color-white);
    border-radius: 8px 8px 64px 8px;
    border: 2px solid #0994C929;
    position: relative;
    overflow: hidden;
    transition: all .3s;
}
.order-step:hover {
    background-color: var(--color-ice);
    transition: all .3s;
}
.order-step div {
    position: relative;
    z-index: 1;
}
.order-step.step-1 {
    width: calc((100% - 48px) / 3);
}
.step-1-link {
    width: fit-content;
    border-bottom: 1px solid var(--color-steel);
    padding-bottom: 8px;
    transition: all .3s;
}
.step-1-link:hover {
    color: var(--color-black);
    border-bottom: 1px solid var(--color-black);
    transition: all .3s;
}
.order-steps__right {
    width: calc(100% - ((100% - 48px) / 3));
}
.order-steps__right .order-step {
    width: calc((100% - 24px) / 2);
}
.order-step.step-4 {
    width: 100%;
}
.order-step__num {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background-color: var(--color-frost);
}
.order-step__img {
    position: absolute;
    right: -2px;
    bottom: -20px;
    z-index: 0;
    object-fit: cover;
    width: 160px;
    height: 160px;
    opacity: 0.48;
    transition: all .3s;
}
.step-1 .order-step__img {
    width: 240px;
    height: 240px;
}
.order-step:hover .order-step__img {
    scale: 1.1;
    transition: all .3s;
}

.order-info {
    padding-top: 48px;
    padding-bottom: 96px;
}
.order-info__items .order-info__item {
    width: calc((100% - 48px)/3);
}
.order-info__item {
    border: 1px solid var(--color-frost);
}
.order-info__item a {
    color: var(--color-black);
    border-bottom: 1px solid var(--color-black);
}
.order-info__pb {
    padding-bottom: 12px;
}
.order-info .marker {
    padding: 1px 12px 0;
}

@media (max-width: 1300px) {
    .order-info__items .order-info__item {
        width: 100%;
    }
}

@media (max-width: 1100px) {
    .order-step.step-1,
    .order-steps__right {
        width: calc((100% - 24px) / 2);
    }
    .order-steps__right .order-step {
        width: 100%;
    }
}

@media (max-width: 992px) {
    .order-steps, .order-steps__right {
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .order-steps {
        flex-direction: column;
    }
    .order-step.step-1,
    .order-steps__right {
        width: 100%;
    }
    .order-step__title {
        flex-direction: row;
        align-items: center;
    }
    .step-1 .order-step__img {
        width: 160px;
        height: 160px;
    }
    .order-steps,
    .order-info {
        padding-top: 24px;
        padding-bottom: 24px;
    }
    .order-info.gap24, 
    .order-info .gap24 {
        gap: 16px;
    }
    .order-info .marker {
        padding: 0 4px 0;
    }
}