.d2-card {
    display: block;
    position: relative;
    height: 400px;
    /* Slightly reduced height for better density */
    overflow: hidden;
    border-radius: var(--b-radius);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    /* Stronger initial shadow */
    transform: translateZ(0);
    transition: box-shadow 0.3s ease;
}

.d2-card-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform .6s cubic-bezier(0.165, 0.84, 0.44, 1), filter 0.6s ease;
}

.d2-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1.5rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 40%, transparent 100%);
    /* Stronger gradient */
    color: #fff;
    transform: translateY(0);
    /* Default to visible */
    transition: background 0.3s ease;
}

.d2-card:hover .d2-card-overlay {
    background: linear-gradient(to top, var(--primary-color) 0%, transparent 100%);
}

.d2-card-title {
    font-size: 1.6rem;
    /* Slightly larger title */
    font-weight: 700;
    margin-bottom: 0.25rem;
    opacity: 1;
    transform: translateY(0);
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s, opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s;
}

.d2-card-meta {
    font-size: 0.85rem;
    /* Slightly smaller meta */
    font-weight: 500;
    opacity: 0.8;
    transform: translateY(0);
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s, opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
}

/* Hover states */
.d2-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    /* Stronger hover shadow */
}

.d2-card:hover .d2-card-background {
    transform: scale(1.05);
    /* Slightly less aggressive zoom */
    filter: brightness(0.6);
    /* Darker on hover */
}