/* pages_grids.css */

.projects-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 22px;
    margin-top: 18px;
}

.project-card {
    grid-column: span 4;
}

@media (max-width: 980px) {
    .project-card {
        grid-column: span 6;
    }
}

@media (max-width: 640px) {
    .project-card {
        grid-column: span 12;
    }
}

/* gentle “collected” vibe, not chaotic */
.project-card:nth-child(odd) .card {
    transform: translateY(8px) rotate(-0.15deg);
}

.project-card:nth-child(3n) .card {
    transform: translateY(-6px) rotate(0.15deg);
}

.project-card .card:hover {
    transform: translateY(-6px) rotate(-0.25deg);
}