/* Projects */ .projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 2rem; } .project-card-gridslot { } .project-card { height: fit-content; } .project-card .button { display: inline-block; padding: 0.5rem 1rem; background-color: var(--accent-colour); color: var(--text-background-colour); text-decoration: none; border-radius: 4px; transition: background-color 0.3s; } .project-card .button:hover { background-color: #2b6cb0; } /* .project-thumbnails { position: relative; } .project-thumbnail { position: absolute; bottom: 0; left: 0; right: 0; height: 0; overflow: hidden; transition: height 0.3s ease; } .project-thumbnail img { width: 100%; display: block; } /* .project-card .button:hover + .project-thumbnail */ /* .project-card .button.project_demo_partsenterprise_erp:hover + .project-thumbnail.project_demo_partsenterprise_erp, .project-card .button.project_demo_partsenterprise_store:hover + .project-thumbnail.project_demo_partsenterprise_store, .project-card .button.project_demo_live_partsenterprise_store:hover + .project-thumbnail.project_demo_live_partsenterprise_store, .project-card .button.project_demo_partserp:hover + .project-thumbnail.project_demo_partserp */ /* .project-links .button.project_demo_partsenterprise_erp:hover ~ .project-thumbnails .project_demo_partsenterprise_erp, .project-links .button.project_demo_partsenterprise_store:hover ~ .project-thumbnails .project_demo_partsenterprise_store, .project-links .button.project_demo_live_partsenterprise_store:hover ~ .project-thumbnails .project_demo_live_partsenterprise_store, .project-links .button.project_demo_partserp:hover ~ .project-thumbnails .project_demo_partserp * / .project-thumbnail.active { height: 200px; /* Adjust the height as needed * / } */ .project-detail-button { font-size: 0.9rem; text-decoration: underline; margin-top: 1vh; cursor: pointer; width: fit-content; } .project-thumbnail { margin-top: 2vh; } .project-thumbnail img { max-width: 100%; height: auto; } .project-detail-container { display: none; } .project-detail-container.active { display: block; } .project-links { text-align: center; margin-top: 1vh; }