.service-service{
    padding: 32px 0;
    background-image: url("/assets/images/modules/service-service/bg-mobile.svg");
    background-position: right center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-color: var(--bg);
}

.service-service__wrap{
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, calc(50% - 6px));
    margin: 0 0 24px;
}

.service-service__item{
    background: rgba(255, 255, 255, 0.80);
    box-shadow: 0 10.782px 26.955px 0 rgba(18, 17, 39, 0.08);
    backdrop-filter: blur(1.08px);
    padding: 12px;
    text-decoration: none;
}

.service-service__image{
    display: flex;
    justify-content: flex-end;
    position: relative;
    height: 46px;
    margin: 0 0 12px;
}

.service-service__image img{
    width: auto;
    height: 100%;
}

.service-service__image:before{
    width: 14px;
    height: 14px;
    background: var(--grey-2, #AFB1B4);
    content: '';
    position: absolute;
    left: 0;
    top: 0;
}

.service-service__title{
    margin: 0;
    padding: 0;
    color: var(--black, #202124);
    font-feature-settings: 'liga' off, 'clig' off;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 18px */
}

.service-service__callback.button.button-black{
    width: 100%;
    max-width: 400px;
    height: 50px;
    padding: 0;
}

.service-service__item--empty{
    display: none;
}

.service-service__item:hover{
    background: rgba(255, 128, 27, 0.80);
    box-shadow: 0 20px 50px 0 rgba(18, 17, 39, 0.08);
    backdrop-filter: blur(2px);
}

.service-service__item:hover .service-service__image:before{
    background-color: var(--black);
}

.service-service__item:hover .service-service__title{
    color: var(--black);
}

@media (min-width: 48rem) {
    .service-service{
        background-image: url("/assets/images/modules/service-service/bg.svg");
        background-position: calc(50% + 88px) calc(50% - 48px);
        background-size: auto 900px;
        background-repeat: no-repeat;
        padding: 32px 0 64px;
    }

    .service-service__wrap{
        display: grid;
        gap: 12px;
        grid-template-columns: repeat(4, calc(25% - 9px));
        row-gap: 10px;
        margin: 0 0 24px;
    }

    .service-service__item--empty{
        display: block;
    }

    .service-service__image{
        height: 82px;
        margin-bottom: 24px;
    }

    .service-service__title{
        font-size: 20px;
    }

    .service-service .h2{
        margin: 0 0 72px;
    }

    .service-service__callback.button.button-black{
        max-width: 210px;
    }
}

@media (min-width: 64rem) {
    .service-service .h2{
        font-size: 40px;
    }
}