import * as css from '@plumeria/core';

const styles = css.create({
  featureCard: {
    position: 'relative',
    padding: '24px',
    background: 'var(--card-bg)',
    borderRadius: '16px',
    boxShadow: 'var(--card-box-shadow)',
    transition: 'all 0.3s ease',
    [pseudos.hover]: {
      borderColor: 'var(--card-hover-border)',
      transform: 'translateY(-2px)',
    },
    [breakpoints.md]: {
      padding: '24px',
    },
  },
});