.projects{min-height:100vh;padding-inline:var(--pd-x);padding-bottom:var(--pd-y);background:#fff;padding-top:10vh;position:relative}.projects h1{color:#000;margin-bottom:4vh;font-size:3rem;font-weight:200}.projects-container{gap:1rem;height:28rem;margin:0 auto;display:flex}.project-card{cursor:pointer;will-change:flex;backface-visibility:hidden;border-radius:1rem;flex:1;transition:flex-grow .6s,height .6s;position:relative;overflow:hidden;transform:translateZ(0)}.project-card.active{flex-grow:3}.image-container{z-index:1;background:#000;width:100%;height:100%;position:absolute;inset:0}.project-image{object-fit:cover;transition:transform .6s}.project-card:hover .project-image{transform:scale(1.05)}.card-overlay{z-index:2;pointer-events:none;opacity:1;background:linear-gradient(#0000 0%,#0009 100%);transition:opacity .4s;position:absolute;inset:0}.project-card.active .card-overlay{opacity:.4}.card-overlay.mobile{opacity:.8;background:linear-gradient(#0000 10%,#000c 95%)}.content{color:#fff;z-index:4;padding:2rem;position:absolute;bottom:0;left:0;right:0}.vertical-title{writing-mode:vertical-rl;letter-spacing:.1em;text-transform:uppercase;color:#fff;text-shadow:0 2px 8px #00000080;height:fit-content;font-size:.9rem;transform:rotate(180deg)}.horizontal-content-wrapper{flex-direction:column;gap:.5rem;display:flex}.card-title{color:#fff;text-shadow:0 2px 8px #0000004d;margin:0;font-size:1.75rem;font-weight:300}.view-link-underline{color:#fffc;font-size:.9rem;font-weight:300;text-decoration:underline}@media (max-width:1024px){.projects h1{font-size:2.5rem}.projects-container{height:24rem}}@media (max-width:768px){.projects{padding-top:5vh}.projects h1{font-size:2rem}.projects-container{flex-direction:column;gap:1rem;height:auto;min-height:500px}.project-card{flex:none;height:120px;min-height:120px;transition:height .4s}.project-card.active{height:320px}.vertical-title{text-align:left;letter-spacing:.05em;width:100%;padding:0 1rem;font-size:1rem;position:absolute;top:50%;left:50%;writing-mode:horizontal-tb!important;padding-bottom:1.4rem!important;transform:translate(-50%,-50%)!important}.content{padding:1rem}.view-link{font-size:1rem}}@media (max-width:480px){.projects{padding-inline:1rem}.project-card{border-radius:.75rem;height:120px}.project-card.active{height:280px}}