.film-portfolio{--dim:#a2a2a2}
.film-portfolio .card-tags{font-size:12px;line-height:1.7;color:#a2a2a2}
.film-portfolio .hero-motion{position:absolute;right:24px;bottom:22px;z-index:2;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 14px;border:1px solid #ffffff63;border-radius:7px;background:#111c;color:#fff;font:500 12px/1.4 'DM Sans',Arial,sans-serif;cursor:pointer}
.film-portfolio .hero-motion svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.film-portfolio .hero-motion:hover{background:#242424}
.film-portfolio .hero-motion:focus-visible{outline:2px solid #fff;outline-offset:4px}
.film-portfolio .hero-motion[hidden]{display:none}
.film-portfolio .hero-motion .hero-play{fill:currentColor;stroke:none}
.film-portfolio .hero-motion[data-playing=true] .hero-play,.film-portfolio .hero-motion:not([data-playing=true]) .hero-pause{display:none}
.film-portfolio .hero{padding-bottom:92px}
.film-portfolio .see-all{min-height:44px;align-items:center}
.film-portfolio .card:focus-visible{outline:2px solid #fff;outline-offset:5px}
.film-portfolio dialog.modal{width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:24px;border:0;box-sizing:border-box;background:#000c;color:#fff}
@media(max-width:600px){.film-portfolio .hero-motion{right:16px;bottom:20px}.film-portfolio .card-tags{letter-spacing:0}}