/* HOME WORKS only; approved HERO and shared detail-page styles are untouched. */
.works { --work-thumbnail-ratio:16 / 9; /* Replace img src/width/height to update thumbnails. */ }
.works .work-image { position:relative; display:grid; place-items:center; width:100%; aspect-ratio:var(--work-thumbnail-ratio); background:#111; border:1px solid #242424; }
.works .work-image img { position:absolute; inset:0; display:block; width:100%; height:100%; min-height:0; object-fit:contain; }
.works .work-link { cursor:pointer; }
.works .work-link:focus-visible { outline:2px solid #fff; outline-offset:4px; }

@media(max-width:700px) {
 .works { padding:28px 20px 36px; }
 .works .works-header { align-items:center; gap:12px; margin-bottom:22px; }
 .works .works-introduction { display:block; flex-shrink:1; min-width:0; }
 .works .works-introduction h2 { font-size:32px; }
 .works .works-introduction p { font-size:12px; line-height:1.7; margin:8px 0 0; }
 .works .works-controls { gap:0; flex-shrink:0; }
 .works .works-view-all { font-size:11px; }
 .works .works-view-all span { font-size:18px; margin-left:6px; }
 .works .works-grid { grid-template-columns:minmax(0,1fr); gap:28px; }
 .works .work-information { display:grid; grid-template-columns:1fr; gap:12px; margin-top:14px; }
 .works .work-information h3 { font-size:17px; line-height:1.4; }
 .works .work-information p { font-size:14px; line-height:1.6; margin-top:4px; letter-spacing:.02em; }
 .works .work-view-project { justify-self:start; font-size:11px; gap:10px; padding-bottom:3px; }
 .works .work-view-project > span { font-size:18px; }
}