.feature-card {
    --card-accent: var(--bulma-primary);
    background: radial-gradient(
        circle at 30% 25%,
        color-mix(in srgb, var(--card-accent) 20%, transparent),
        color-mix(in srgb, var(--card-accent) 8%, transparent) 65%,
        transparent 100%
    );
}

.feature-card.is-primary { --card-accent: var(--bulma-primary); }
.feature-card.is-info    { --card-accent: var(--bulma-info); }
.feature-card.is-success { --card-accent: var(--bulma-success); }
.feature-card.is-warning { --card-accent: var(--bulma-warning); }
.feature-card.is-danger  { --card-accent: var(--bulma-danger); }
.feature-card.is-link    { --card-accent: var(--bulma-link); }

.card-hoverable {
    transition: box-shadow 0.2s, transform 0.15s;
}

.card-hoverable:hover {
    box-shadow: 0 8px 28px color-mix(in srgb, var(--bulma-text-strong) 10%, transparent);
    transform: translateY(-2px);
}

.icon-circle,
.icon-square {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.2rem;
    background-color: color-mix(in srgb, var(--bulma-primary) 15%, transparent);
}

.icon-circle { border-radius: 50%; }
.icon-square { border-radius: 25%; }

.icon-circle-small,
.icon-square-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    font-size: 0.85rem;
    background-color: color-mix(in srgb, var(--bulma-primary) 15%, transparent);
}

.icon-circle-small { border-radius: 50%; }
.icon-square-small { border-radius: 25%; }

.icon-circle.is-primary, .icon-square.is-primary,
.icon-circle-small.is-primary, .icon-square-small.is-primary {
    background-color: color-mix(in srgb, var(--bulma-primary) 15%, transparent);
}
.icon-circle.is-info, .icon-square.is-info,
.icon-circle-small.is-info, .icon-square-small.is-info {
    background-color: color-mix(in srgb, var(--bulma-info) 15%, transparent);
}
.icon-circle.is-success, .icon-square.is-success,
.icon-circle-small.is-success, .icon-square-small.is-success {
    background-color: color-mix(in srgb, var(--bulma-success) 15%, transparent);
}
.icon-circle.is-warning, .icon-square.is-warning,
.icon-circle-small.is-warning, .icon-square-small.is-warning {
    background-color: color-mix(in srgb, var(--bulma-warning) 15%, transparent);
}
.icon-circle.is-danger, .icon-square.is-danger,
.icon-circle-small.is-danger, .icon-square-small.is-danger {
    background-color: color-mix(in srgb, var(--bulma-danger) 15%, transparent);
}
.icon-circle.is-link, .icon-square.is-link,
.icon-circle-small.is-link, .icon-square-small.is-link {
    background-color: color-mix(in srgb, var(--bulma-link) 15%, transparent);
}

.icon-circle img, .icon-square img { width: 1.4rem; height: 1.4rem; object-fit: contain; }
.icon-circle-small img, .icon-square-small img { width: 0.85rem; height: 0.85rem; object-fit: contain; }