.player-grid{aspect-ratio:16/9;grid-template-columns:47% 47%;gap:6%;width:100%;display:grid;position:relative}.player-grid>.player-wrapper{width:47%;transition:opacity .2s ease-in-out .1s,width .3s ease-in-out;position:absolute}.player-grid>.player-wrapper.index-0{top:0;left:0}.player-grid>.player-wrapper.index-1{top:0;right:0}.player-grid>.player-wrapper.index-2{bottom:0;left:0}.player-grid>.player-wrapper.index-3{bottom:0;right:0}.player-grid>.player-wrapper.enlarged{z-index:10;width:100%;transition:opacity .2s ease-in-out,width .4s ease-in-out 50ms}.player-grid>.player-wrapper.minimized{opacity:0;width:22%}.player-wrapper{aspect-ratio:16/9;width:100%;box-shadow:var(--shadow-small);background-color:var(--chalk);border-radius:40px;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.player-wrapper.blackbars{background-color:#000}.player-wrapper video{object-fit:cover;height:100%;transition:filter var(--duration-mouse) ease-in-out}.player-wrapper video:hover{filter:brightness(.7)}.player-title{z-index:3;padding-left:4px;position:absolute;top:30px;left:36px}.buffering-wheel{pointer-events:none;z-index:5;width:60px;height:60px;animation:1.2s linear infinite wheel-spin;position:absolute}.buffering-wheel svg{fill:none;stroke:var(--chalk);stroke-linecap:round;stroke-miterlimit:10}@keyframes wheel-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.video-controls{z-index:3;opacity:0;transition:opacity var(--duration-mouse);align-items:center;gap:1rem;padding-right:4px;display:flex;position:absolute;bottom:30px;left:36px;right:36px}.player-wrapper:hover .video-controls,.player-wrapper:focus-within .video-controls{opacity:1}.player-wrapper button{border:1px solid var(--chalk);width:46px;height:46px;transition:background-color var(--duration-mouse);background-color:#0000;border-radius:50%;justify-content:center;align-items:center;padding:0;display:flex}.player-wrapper button:hover,.player-wrapper button:focus-visible{background-color:var(--chalk-30);animation:none}button.info{z-index:3;opacity:0;transition:opacity var(--duration-mouse);position:absolute;top:30px;right:36px}.player-wrapper:hover button.info,.player-wrapper:focus-within button.info{opacity:1}button.play svg{width:20px;height:20px;fill:var(--chalk)}button.fullscreen{border-radius:10px;justify-content:flex-start;align-items:flex-start;width:40px;height:40px}button.fullscreen.big{display:none}button.fullscreen .lines{border-bottom:1px solid var(--chalk);border-right:1px solid var(--chalk);width:50%;height:50%;transition:width var(--duration-mouse) ease-out, height var(--duration-mouse) ease-out;display:block}button.fullscreen:hover .lines,button.fullscreen:focus-visible .lines,button.fullscreen.expanded .lines{width:65%;height:65%}.video-overlay{background-color:var(--onyx-60);opacity:0;visibility:hidden;transition:opacity var(--duration-theme), visibility var(--duration-theme);z-index:2;flex-direction:column;padding:80px 40px;display:flex;position:absolute;inset:0}.video-overlay span{color:var(--chalk)}button.info:hover+.video-overlay,button.info:focus-visible+.video-overlay{opacity:1;visibility:visible}.progress-bar{flex:1;align-items:center;height:10px;display:flex}.progress-track{border-bottom:1px solid var(--onyx);width:100%;height:1px}.progress-fill{background-color:var(--chalk);border-radius:2px;height:2px;transition:width .2s linear}.work-card-wrapper{aspect-ratio:16/9;width:100%;box-shadow:var(--shadow-small);border-radius:24px;display:flex;position:relative;overflow:hidden}.work-card-wrapper>img{aspect-ratio:16/9;width:100%}@media screen and (max-width:1200px){.player-wrapper{border-radius:30px}.video-overlay{padding:74px 34px}.player-title{top:24px;left:30px}button.info{top:24px;right:30px}.video-controls{bottom:24px;left:30px;right:30px}.player-wrapper button{width:40px;height:40px}button.play svg{width:16px;height:16px}button.fullscreen{border-radius:9px;width:36px;height:36px}}@media screen and (max-width:960px){.player-grid{aspect-ratio:unset;grid-template-columns:repeat(1,1fr);gap:40px}.player-grid>.player-wrapper{width:100%;position:relative}.video-controls,button.info{opacity:1}button.fullscreen.big{display:flex}}@media screen and (max-width:760px){.player-wrapper{border-radius:0}.player-wrapper video{width:100%;height:auto}.video-overlay{padding:60px 28px}.video-overlay p{width:70%}.player-title{top:20px;left:24px}button.info{top:20px;right:24px}.video-controls{bottom:20px;left:32px;right:32px}.player-wrapper button{width:32px;height:32px}button.play svg{width:16px;height:16px}button.fullscreen{border-radius:7px;width:28px;height:28px}}@media screen and (max-width:480px){.video-overlay{padding:56px 24px}.video-overlay p{width:80%}.player-title{top:16px;left:20px}button.info{top:16px;right:20px}.video-controls{bottom:16px}}
.page-wrapper.details{background-color:var(--chalk);color:var(--onyx);z-index:9;min-height:100vh;transition:transform var(--duration-page) ease-in-out;flex-direction:column;align-items:center;padding:60px 0;display:none;position:fixed;inset:0;transform:translate(0)}.page-wrapper.details.off-screen{transform:translate(100%)}.details-content{flex-direction:column;flex-grow:1;gap:2rem;width:100%;display:flex}.details-content>p{text-align:left;padding:0 2rem}.details-top{justify-content:space-between;align-items:center;padding:0 2rem;display:flex}.info-box{text-align:left;flex-direction:column;gap:.25rem;padding:0 2rem;display:flex}button.close-button{background-color:#0000;justify-content:center;align-items:center;padding:16px;display:flex}button.close-button svg{width:16px}button.close-button svg line{fill:none;stroke:var(--onyx);stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}.page-wrapper.details h2{color:var(--onyx)}@media screen and (max-width:960px){.page-wrapper.details{display:flex}}
.works-wrapper{z-index:3;flex-direction:column;align-items:center;gap:60px;display:flex;position:relative;transform:translateY(-150px)}.works-wrapper.mobile{display:none}@media screen and (max-width:1600px){.works-wrapper{gap:50px}}@media screen and (max-width:1200px){.works-wrapper{gap:40px;transform:translateY(-130px)}}@media screen and (max-width:760px){.works-wrapper{transform:translateY(-120px)}.works-wrapper.desktop{display:none}.works-wrapper.mobile{display:flex}}@media screen and (max-width:600px){.works-wrapper{transform:translateY(-100px)}}@media screen and (max-width:480px){.works-wrapper{transform:translateY(-85px)}}