e>
.project-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    /* Use Tailwind theme variables for more modular approach */
    @apply bg-bg-primary-light dark:bg-bg-secondary-dark;
    backdrop-filter: blur(10px);
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rg