.graphic-case-page .main{grid-template-columns:minmax(250px,30%) 1fr;gap:3.5vw}.graphic-case-page .description{max-width:330px}.graphic-case-page .graphic-works{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:12px}.graphic-case-page .graphic-work,.graphic-case-page .graphic-work:first-child{display:block;grid-row:auto;min-height:0;padding:0;background:#07131c;isolation:isolate;transition:border-color .3s ease,transform .35s cubic-bezier(.16,1,.3,1)}
.graphic-work img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.8;filter:saturate(.78) brightness(.78);transition:opacity .4s ease,transform .6s cubic-bezier(.16,1,.3,1),filter .4s ease}.graphic-work:first-child img{object-fit:contain}.graphic-work:after{z-index:1;inset:0;width:auto;height:auto;transform:none;background:linear-gradient(180deg,rgba(2,7,17,.45),transparent 28%,transparent 55%,rgba(2,7,17,.95));pointer-events:none}.graphic-work:before{z-index:3}.graphic-work .ph-top,.graphic-work .ph-title,.graphic-work .ph-bottom{z-index:2}.graphic-work .ph-title{top:auto;right:15px;bottom:38px;left:15px;transform:none;white-space:normal;font-size:clamp(14px,1.05vw,18px);line-height:1.35;color:#fff}.graphic-work .ph-bottom{left:15px;color:#bde4ff}.graphic-work:hover,.graphic-work:focus-visible{border-color:#def4ff;transform:translateY(-3px);outline:2px solid #def4ff;outline-offset:2px}.graphic-work:hover img,.graphic-work:focus-visible img{opacity:1;filter:saturate(.92) brightness(.92);transform:scale(1.025)}
@media(max-width:1100px){.graphic-case-page .main{grid-template-columns:minmax(230px,27%) 1fr}.graphic-case-page .graphic-works{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.page.graphic-case-page{height:auto;min-height:100svh;overflow:auto}.graphic-case-page .main{position:relative;inset:auto;display:flex;margin:108px 20px 28px;gap:26px}.graphic-case-page .intro{display:grid;grid-template-columns:1fr auto;align-items:end}.graphic-case-page .eyebrow,.graphic-case-page .description{grid-column:1/-1}.graphic-case-page .back{grid-column:2;grid-row:2;margin:0 0 0 18px;min-height:44px}.page.graphic-case-page .graphic-works{flex:none;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;gap:14px}.graphic-case-page .graphic-work{aspect-ratio:4/3}.graphic-case-page .description{font-size:14px;line-height:1.75}}
@media(max-width:600px){.page.graphic-case-page .graphic-works{grid-template-columns:1fr;gap:16px}.graphic-case-page .graphic-work{aspect-ratio:4/3}.graphic-case-page .intro{display:flex;align-items:flex-start;gap:12px}.graphic-case-page .title{font-size:46px;line-height:1.08}.graphic-case-page .description{margin-top:0}.graphic-case-page .back{margin:4px 0 0}.graphic-work .ph-title{font-size:19px}.graphic-work .ph-top,.graphic-work .ph-bottom{font-size:12px}}
@media(prefers-reduced-motion:reduce){.graphic-work,.graphic-work img{transition:none}}
.page.graphic-case-page .graphic-works{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1fr)}
.graphic-work:last-child img{object-fit:contain;background:#302741}
@media(min-width:601px) and (max-width:900px){.page.graphic-case-page .graphic-works{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto}.graphic-case-page .graphic-work{aspect-ratio:3/5}}
@media(max-width:600px){.page.graphic-case-page .graphic-works{grid-template-columns:1fr;grid-template-rows:auto}}