* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    padding: 40px 20px;
    box-sizing: border-box;
}

.service-card {
    display: flex;
    align-items: stretch;
    background: #2f2f2f;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.card-content {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-title {
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 12px;
    color: var(--text-color-5);
}

.card-subtitle {
    font-size: 14px;
    color: var(--text-color-2);
    margin-bottom: 24px;
    text-transform: uppercase;
}

.service-card .card-list li{
    color: var(--text-color-4) !important;
}

.card-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.card-list li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 12px;
    font-size: 14px;
}

.card-list li::before {
    content: '✓';
    color: var(--text-color-1);
    position: absolute;
    left: 0;
    font-weight: bold;
}

.card-image-wrapper {
    position: relative;
    width: 40%;
    flex-shrink: 0;
    overflow: hidden;
}

.card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    overflow: hidden;
    clip-path: polygon(30% 0, 100% 0, 100% 100%, 10% 100%);
}

/* Диагональные срезы через clip-path */
.card-image-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 100%);
    /* Срез: от верхнего правого угла к нижней левой точке (примерно 20% ширины) */
    clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
}


/* Адаптив: на мобильных убираем срез и номера, фото на всю ширину */
@media (max-width: 768px) {
    .service-card {
        flex-direction: column;
    }

    .card-image-wrapper {
        width: 100%;
        height: 200px;
    }

    .card-image-wrapper::before {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); /* Отключаем срез */
    }

    .service-card::after {
        display: none;
    }

    .card-content {
        padding: 24px;
    }
}