:root {
    --white: #ffffff;
}

@media only screen and (min-width: 1257px) {
    .stepper {
        display: flex;
        border-radius: 12px;
        padding: 24px 20px 24px 20px;
        background-color: var(--white);
    }

    .mobile-current-step {
        display: none;
    }

    .stepper-steps {
        display: flex;
        flex-direction: row;
        width: 100%;
    }
}

@media only screen and (max-width: 1257px) {
    .stepper {
        display: flex;
        flex-direction: column;
        border-radius: 12px;
        padding: 18px 20px 18px 20px;
        background-color: var(--white);
        box-shadow: 0px 0px 6px 0px var(--outline-blue);
        gap: 8px;
        width: calc(100% - 24px);
    }

    .mobile-current-step {
        display: flex;
        font-weight: 600;
        font-size: 16px;
        line-height: 22px;
    }

    .stepper-steps {
        display: flex;
        flex-direction: row;
        gap: 6px;
    }
}