.services-hero__wrapper {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1px;
    background: rgba(119, 119, 119, 0.15);
}

.services-hero__intro {
    grid-column: span 4;
    background: var(--color-surface);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 100%;
}

.services-hero__description {
    font-size: 0.875rem;
    color: var(--color-secondary);
    line-height: 1.7;
    max-width: 280px;
}

.services-hero__item {
    grid-column: span 4;
    background: var(--color-surface);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: background 0.4s ease, color 0.4s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.services-hero__item:visited,
.services-hero__item:active,
.services-hero__item:focus {
    text-decoration: none;
    color: inherit;
}

.services-hero__item:hover {
    background: var(--color-primary);
}

.services-hero__item:hover * {
    color: var(--color-on-primary);
}

.services-hero__item--small {
    grid-column: span 3;
}

.services-hero__icon {
    font-size: 40px;
    color: var(--color-primary);
}

.services-hero__heading {
    font-size: clamp(1.1rem, 2vw, 1.8rem);
    margin-bottom: var(--space-sm);
}

.services-hero__heading-sm {
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    margin-bottom: var(--space-xs);
}

.services-hero__text {
    font-size: 0.75rem;
    color: var(--color-secondary);
    line-height: 1.6;
}

.services-hero__title {
    font-size: clamp(1.1rem, 5vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    max-width: 280px;
}

@media (max-width: 1024px) {

    .services-hero__intro,
    .services-hero__item {
        grid-column: span 6;
    }

    .services-hero__item--small {
        grid-column: span 6;
    }
}

@media (max-width: 640px) {

    .services-hero__intro,
    .services-hero__item {
        grid-column: span 12;
        padding: var(--space-md);
    }

    .services-hero__intro {
        align-items: flex-start;
    }

    .services-hero__wrapper {
        gap: 1px;
    }
}