.services {
    width: min(100% - 2rem, var(--content-width));
    margin-inline: auto;
    padding-block: var(--space-xl);
}

.services h2 {
    margin: 0;

    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
}

.services-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(240px, 1fr));

    gap: 1.5rem;

    margin-top: 2.5rem;
}

.service-card {
    padding: 2rem;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    background: var(--color-surface);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease;
}

.service-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-primary);
}

.service-card h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
}

.service-card p {
    margin: 0;

    color: var(--color-text-muted);
}