#works{overflow:hidden;}
.w-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(18px,3vw,34px);
  margin-top:2.4rem;position:relative;z-index:1;}
.w-play{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;position:relative;
  border-radius:10px;overflow:hidden;}
.w-thumb{display:block;aspect-ratio:16/9;width:100%;background-size:cover;background-position:center;
  box-shadow:0 24px 50px -28px rgba(20,30,32,.5);transition:transform .5s var(--ease-quint),filter .4s ease;}
.w-card:hover .w-thumb,.w-play:focus-visible .w-thumb{transform:scale(1.03);filter:saturate(1.06);}
.w-icon{position:absolute;left:50%;top:50%;width:64px;height:64px;transform:translate(-50%,-50%);
  border-radius:50%;background:rgba(255,255,255,.88);display:grid;place-items:center;
  transition:transform .3s var(--ease-back),background .3s;}
.w-icon::before{content:"";border-style:solid;border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent var(--teal-900);margin-left:3px;}
.w-card:hover .w-icon,.w-play:focus-visible .w-icon{transform:translate(-50%,-50%) scale(1.1);background:#fff;}
.w-frame{position:relative;aspect-ratio:16/9;width:100%;border-radius:10px;overflow:hidden;
  box-shadow:0 24px 50px -28px rgba(20,30,32,.5);}
.w-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.w-meta{margin-top:14px;}
.w-meta h3{font-family:var(--serif-jp);font-weight:500;font-size:1.15rem;margin:0;letter-spacing:.02em;}
.w-meta p{font-size:.82rem;color:var(--mist);margin:.2rem 0 0;}
@media(prefers-reduced-motion:reduce){.w-thumb,.w-icon{transition:none;}}