.process-section {
    background: var(--color-bg-soft);
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.process-step {
    padding: 30px;
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,.56);
    border: 1px solid rgba(212,202,189,.8);
}

.process-step span {
    display: inline-flex;
    margin-bottom: 46px;
    color: var(--color-accent-dark);
    font-weight: 800;
    letter-spacing: .12em;
}

.process-step p {
    margin-bottom: 0;
}

@media (max-width: 900px) {

    .process-section {
        overflow: hidden;
    }

    .process-steps {
        display: flex;
        flex-direction: row;

        gap: 18px;

        overflow-x: auto;
        overflow-y: hidden;

        padding: 0 22px 14px 0;
        margin-right: calc(var(--container-padding, 20px) * -1);

        scroll-snap-type: x mandatory;
        scroll-padding-left: 0;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .process-step {
        flex: 0 0 76%;
        max-width: 76%;

        min-height: 260px;

        scroll-snap-align: start;
        scroll-snap-stop: always;

        padding: 28px;
        border-radius: var(--radius-lg);
    }

    .process-step:hover {
        transform: none;
    }

    .process-step span {
        margin-bottom: 34px;
    }

    .process-steps::-webkit-scrollbar {
        height: 4px;
    }

    .process-steps::-webkit-scrollbar-track {
        background: transparent;
    }

    .process-steps::-webkit-scrollbar-thumb {
        background: rgba(169, 151, 124, .55);
        border-radius: 999px;
    }
}