/* css/components.css */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 80px 5%;
    max-width: 1400px;
    margin: 0 auto;
    perspective: 1000px;
}

.highlight-card {
    background: var(--surface-gray);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform-style: preserve-3d;
}

.highlight-card:hover {
    transform: scale3d(1.05, 1.05, 1.05) rotateX(2deg) rotateY(-2deg);
    box-shadow: -10px 20px 40px rgba(0,0,0,0.15);
    z-index: 2;
}

.highlight-img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.highlight-content {
    padding: 30px;
}

/* Mobile Fixes */
@media (max-width: 1024px) {
    .bento-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .bento-grid { grid-template-columns: 1fr; }
}