.feature-section {}

.feature-section__grid {
    /* gap: clamp(var(--space-sm), 4vw, var(--space-xl)); */
}

.feature-card {
    --u-card-bevel: var(--shape-card-bevel-sm);
    background: var(--color-surface);
    border-color: var(--color-border);
    padding: clamp(var(--space-sm), 3vw, var(--space-md));
    flex: 1 1 260px;
    transition: transform var(--transition-default), box-shadow var(--transition-default);
}

.feature-card:nth-child(3n + 1) {
    border-color: rgba(255, 46, 99, 0.55);
    box-shadow: var(--shadow-primary);
}

.feature-card:nth-child(3n + 2) {
    border-color: rgba(0, 217, 255, 0.55);
    box-shadow: var(--shadow-cyan);
}

.feature-card:nth-child(3n) {
    border-color: rgba(255, 190, 11, 0.55);
    box-shadow: var(--shadow-yellow);
}

.feature-card::after {
    content: '';
    position: absolute;
    top: -12px;
    left: -12px;
    width: 40px;
    height: 40px;
    background: var(--color-primary);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    opacity: 0.85;
}

.feature-card:nth-child(3n + 2)::after {
    background: var(--color-cyan);
}

.feature-card:nth-child(3n)::after {
    background: var(--color-yellow);
}

.feature-card__title {
    margin: 0 0 clamp(0.5rem, 1.6vw, 1.2rem);
}

.feature-card__body {
    margin: 0;
    color: rgba(232, 232, 232, 0.78);
    line-height: 1.7;
}

.feature-card:hover {
    transform: translate(-4px, -4px);
}