#site-process {
    .wrap {
        margin-bottom: 20px;
    }

    .list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;    
    }

    @media (max-width: 980px) {
        .list {
            grid-template-columns: 1fr;
            gap: 20px;
        }
    }

    .item {
        position: relative;
        background-size: cover;
        background-position: center;
        background-color: var(--site-background);
        background: linear-gradient(to top, var(--site-background), transparent);
        overflow: hidden;
        justify-content: center;
        align-items: center;
        padding: 30px;
        border: 1px solid var(--site-border);
        border-radius: 16px;
        position: relative;


        .title {
            font-size: 24px;
            color: #fff;
            font-weight: 600;
            margin-bottom: 100px;
        }

        .number {
            color: var(--site-primary);
            font-size: 24px;
            border: 1px solid var(--site-border);

             display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            position: relative;
            overflow: hidden;
            transition: all 0.2s;           
        }

        .text {
            color: var(--site-text);  
        }

        * {
            position: relative;
            z-index: 2;
        }

        svg {
            width: auto;
            height: 24px;
            display: inline-block;

            * {
                fill: var(--site-primary); !important;
            }             
        }      
    }    
}