*{box-sizing:border-box;margin:0;padding:0}body{font-family:Avenir,Helvetica,Arial,sans-serif;background:#f9f9f9;color:#333}#app{max-width:1200px;margin:0 auto;padding:2rem 1rem}.portfolio-header{text-align:center;margin-bottom:2rem}.portfolio-header h1{font-size:2.5rem;margin-bottom:.5rem;color:#2c3e50}.portfolio-header .subtitle{font-size:1.2rem;color:#555;margin-bottom:.25rem}.portfolio-header .meta{font-size:.9rem;color:#777}.assignments-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}.assignment-card{background:#fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.1);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease;cursor:pointer}.assignment-card:hover{transform:translateY(-5px);box-shadow:0 4px 12px rgba(0,0,0,.15)}.card-link{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none}.image-wrapper{width:100%;padding-top:56.25%;position:relative;overflow:hidden}.image-wrapper img{position:absolute;top:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.card-content{padding:1rem;flex:1;display:flex;flex-direction:column}.card-content h2{font-size:1.25rem;margin-bottom:.5rem;color:#2c3e50}.card-content .description{font-size:1rem;color:#444}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#fff;padding:2rem;border-radius:8px;max-width:80%;text-align:center;position:relative}.modal-close{position:absolute;top:.5rem;right:.5rem;background:transparent;border:none;font-size:1.5rem;cursor:pointer}.modal-content img{max-width:100%;margin-top:1rem}.modal-text{margin-top:.5rem;font-size:1rem;color:#555}