.wrapper-child-services {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: auto;
}

.child-service {
    background: #f8faff;
    padding: 16px 16px 24px 16px;
    border-radius: 16px;
    flex: 1 1 calc(33.333% - 20px);
    /* По умолчанию 3 в ряд */
}


.child-service .title-child-service {
    text-transform: uppercase;
    margin-bottom: 50px;
    font-weight: 500;
}

.child-service a {
    display: block;
    margin-top: 10px;
    color: var(--blue-500);
    text-decoration: none;
}


.child-service a:hover {
    color: var(--txt);
}


/* Если последний элемент сам в строке — он занимает всю ширину */
.wrapper-child-services> :nth-last-child(1):nth-child(3n + 1) {
    flex: 1 1 100%;
}


@media (max-width: 600px) {
    .child-service {
        flex: 1 1 100%;
    }
}