.services {
    /*padding: 88px 80px 140px 80px !important;*/
    padding-top: 88px !important;
    padding-bottom: 140px !important;
}

.service {
    display: flex;
    flex: 1 0 30%;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 21px;

    border-radius: 10px;
    background: var(--background-color);

    box-shadow: 0 1px 3px 0 rgba(215, 211, 209, 0.10), 0 5px 5px 0 rgba(215, 211, 209, 0.09), 0 11px 6px 0 rgba(215, 211, 209, 0.05), 0 19px 7px 0 rgba(215, 211, 209, 0.01), 0 29px 8px 0 rgba(215, 211, 209, 0.00);
}

.services__subtitle {
    margin-top: 12px;
    font-size: 18px !important;
}

.services__content {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    align-content: flex-start;
    gap: 46px;
    flex-wrap: wrap;

    margin-top: 40px;
}


@media screen and (max-width: 1024px) {
    .services {
        /*padding: 64px 40px 128px 40px !important;*/
        padding-top: 64px !important;
        padding-bottom: 128px !important;
    }

    .services__content {
        gap: 24px;
        margin-top: 32px;
    }

    .service {
        gap: 16px;
        flex: 1 0 50%;
    }
}

@media screen and (max-width: 768px) {
    .services {
        /*padding: 32px 16px 104px 16px !important;*/
        padding-top: 32px !important;
        padding-bottom: 104px !important;
    }

    .services__subtitle {
        margin-top: 8px;
        font-size: 16px !important;
    }

    .service {
        gap: 8px;
        flex: 1 0 100%;
    }

    .services__content {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        margin-top: 24px;
    }
}