.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:var(--spacing-xl)}.portfolio-video-wrapper{position:relative;width:100%;padding-top:56.25%;aspect-ratio:16 / 9;background:#000;overflow:hidden;flex:1}.portfolio-item{background-color:var(--color-background);border-radius:var(--border-radius-lg);overflow:hidden;box-shadow:var(--box-shadow);transition:transform var(--transition-speed) var(--transition-timing),box-shadow var(--transition-speed) var(--transition-timing);display:flex;flex-direction:column}.portfolio-item:hover{transform:translateY(-4px);box-shadow:var(--box-shadow-lg)}.portfolio-title{order:1;padding:var(--spacing-md) var(--spacing-md) var(--spacing-xs);font-size:1.25rem;font-weight:600;text-align:center;margin:0;z-index:1;position:relative}.portfolio-description{order:2;padding:0 var(--spacing-md) var(--spacing-md);color:var(--color-text-light);margin:0;z-index:1;position:relative}.portfolio-video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;cursor:pointer}.video-play-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:none;background:transparent;cursor:pointer;transition:transform 0.2s ease,opacity 0.3s ease;opacity:0.9;z-index:10}.video-play-button:hover{transform:translate(-50%,-50%) scale(1.1);opacity:1}.video-play-button.hidden{opacity:0;pointer-events:none}