Restore grid layout on desktop, stack on mobile

This commit is contained in:
chris 2025-12-10 12:47:05 -05:00
parent f0ad94aa37
commit 75476b62a3

View File

@ -232,6 +232,7 @@ h1 {
.save-item input { width: 18px; height: 18px; }
.save-actions { display: flex; justify-content: flex-end; gap: 8px; }
.icon-woodland { width: 22px; height: 22px; }
.import-selection { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 10px; }
.container {
max-width: 1200px;
@ -247,11 +248,12 @@ h1 {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 20px;
align-items: start; /* Prevent shorter cards from stretching to tallest row mate */
grid-auto-flow: row dense; /* Fill gaps when possible */
}
@media (min-width: 1280px) {
@media (max-width: 768px) {
.projects-grid {
grid-template-columns: repeat(3, minmax(320px, 1fr));
grid-template-columns: 1fr;
}
}
@ -264,7 +266,6 @@ h1 {
box-shadow: var(--shadow);
transition: background-color 0.3s;
border: 1px solid var(--border);
z-index: 10;
}
.project-header {