.img-block:hover .bg-runner{color:var(--xlc-black)}.img-block:hover .bg-runner:before{width:100%}.timeline:before{content:"";position:absolute;top:0;left:0;width:12px;height:100%;background:var(--sub);transform-origin:left center;transform:rotate(-45deg)}.yp-container{transition:all 1s}.yp-container *::-moz-selection{background-color:transparent}.yp-container *::selection{background-color:transparent}.yp-block{position:relative}.yp-block .year-separator{position:absolute;width:1px;background:var(--sub)}.yp-block:hover .year-container .year{background-position:0;color:var(--sub);opacity:1;font-weight:700}.yp-block .year-container{background-color:#fff;transition:all .4s}.yp-block .year-container .year{color:var(--xlc-black);font-weight:700;background-image:linear-gradient(to right,var(--xlc-black),var(--xlc-black) 50%,var(--sub) 50%);background-size:200% 100%;background-position:100%;display:inline-flex;position:relative;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;transition:all .3s ease-in-out}@media ((min-width: 1024px)){.yp-block .year-container{background-color:transparent}.yp-block .year-container .year{font-weight:300;background-image:linear-gradient(to right,var(--sub),var(--sub) 50%,var(--xlc-black) 50%)}}.yp-block .project-block{max-height:0;opacity:0;overflow:hidden;transition:max-height .8s,opacity .8s .4s}.yp-block .project-block .project-name{color:var(--xlc-black);font-weight:300;background-image:linear-gradient(to right,var(--sub),var(--sub) 50%,var(--xlc-black) 50%);background-size:200% 100%;background-position:100%;display:inline-block;position:relative;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;transition:all .3s ease-in-out}.yp-block .project-block .project-name:hover{background-position:0;color:var(--sub);opacity:1;font-weight:700}@media ((min-width: 1024px)){.yp-block .project-block .project-name{color:#fff;background-image:none;background-color:var(--sub);background-clip:unset;-webkit-text-fill-color:unset}.yp-block .project-block .project-name:hover{background-image:none;background-color:var(--sub);color:#fff;font-weight:300;background-clip:unset}}.yp-block .project-block .project-img-container{padding-bottom:100%;transition:all .4s}.yp-block .project-block .project-img{top:0;left:0}@media ((min-width: 1024px)){.yp-block .project-block .project-img{filter:grayscale(1)}.yp-block .project-block{max-height:-moz-fit-content;max-height:fit-content;opacity:1}}.yp-block .project-block .project-name-deco{transition:all .4s}@media ((min-width: 1024px)){.yp-block .project-block:hover .project-name{color:var(--xlc-black)}.yp-block .project-block:hover .project-name:before{width:calc(100% - .75rem)}}.yp-block.active .deco-icon{opacity:0}.yp-block.active .year-container{color:#fff;background-color:var(--sub)}.yp-block.active .year-container .year{color:#fff;background-position:100%;background-image:linear-gradient(to right,var(--sub),var(--sub) 50%,#fff 50%)}.yp-block.active .project-block{max-height:100vh;opacity:1}.yp-block.active .project-block:hover .project-name{background-position:0;color:var(--sub);opacity:1;font-weight:700}.yp-block.active .project-block:hover .project-name:before{width:calc(100% - .75rem)}.yp-block.active .container-spacer{height:1.5rem}@media ((min-width: 1024px)){.yp-block .project-block{width:10rem;height:10rem;transition:all .4s}.yp-block .project-block .project-name{z-index:1;opacity:0;padding:.5rem 1rem 1rem 1.5rem}.yp-block .project-block .project-name:before,.yp-block .project-block .project-name:after{content:"";position:absolute;background-color:#fff}.yp-block .project-block .project-name:before{width:3px;height:calc(100% - .75rem);left:.75rem;top:0;transition:all .4s;z-index:-1}.yp-block .project-block .project-name:after{width:calc(100% - .75rem);height:1px;left:.75rem;bottom:.75rem}.yp-block .text-deco{transition:all .4s;pointer-events:none}.yp-block:hover .project-img{filter:grayscale(0)}.yp-block:nth-of-type(3n-1) .year{flex-direction:column}.yp-block:nth-of-type(6n+1){display:flex;transform:translateY(20rem);margin-left:2rem}.yp-block:nth-of-type(6n+1) .year-separator{height:10rem;top:0;left:0}.yp-block:nth-of-type(6n+1) .year-container{height:10rem;padding-right:1.5rem}.yp-block:nth-of-type(6n+1) .project-block .project-img{top:auto;left:auto;right:0;bottom:0}.yp-block:nth-of-type(6n+1) .text-deco{left:0;bottom:0;width:100%;height:100%}.yp-block:nth-of-type(6n+1):hover .text-deco{width:1rem;height:50%}.yp-block:nth-of-type(6n+1):hover .project-block{width:15rem;height:15rem}.yp-block:nth-of-type(6n+1):hover .project-block .project-name{opacity:1}.yp-block:nth-of-type(6n+1):hover .project-block:nth-of-type(3n+2),.yp-block:nth-of-type(6n+1):hover .project-block:nth-of-type(3n+3){width:18rem}.yp-block:nth-of-type(6n+1):hover .project-block:nth-of-type(3n+2) .project-img-container,.yp-block:nth-of-type(6n+1):hover .project-block:nth-of-type(3n+3) .project-img-container{padding-bottom:75%}.yp-block:nth-of-type(6n+2){display:flex;flex-direction:column;margin-left:2rem;transform:translateY(14.5rem)}.yp-block:nth-of-type(6n+2) .year-separator{height:15.5rem;top:0;left:0}.yp-block:nth-of-type(6n+2) .year-container .year{margin-bottom:1rem}.yp-block:nth-of-type(6n+2) .text-deco{left:0;top:0;width:10rem;height:5.5rem}.yp-block:nth-of-type(6n+2):hover .text-deco{left:6rem;width:6rem;height:1rem}.yp-block:nth-of-type(6n+2):hover .project-block{width:15rem;height:15rem}.yp-block:nth-of-type(6n+2):hover .project-block .project-name{opacity:1}.yp-block:nth-of-type(6n+2):hover .project-block:nth-of-type(2n){width:18rem}.yp-block:nth-of-type(6n+2):hover .project-block:nth-of-type(2n) .project-img-container{padding-bottom:75%}.yp-block:nth-of-type(6n+3){display:flex;flex-direction:column;justify-content:center;margin-left:2rem}.yp-block:nth-of-type(6n+3) .year-separator{height:35%;bottom:0;left:0}.yp-block:nth-of-type(6n+3) .year-container{height:3rem;width:10rem;order:2}.yp-block:nth-of-type(6n+3) .year-container .year{margin-left:3rem}.yp-block:nth-of-type(6n+3) .projects-container{display:flex}.yp-block:nth-of-type(6n+3) .project-block .project-img{top:auto;left:auto;right:0;bottom:0}.yp-block:nth-of-type(6n+3) .text-deco{left:0;bottom:0;width:100%;height:100%}.yp-block:nth-of-type(6n+3):hover .text-deco{width:6rem;height:25%}.yp-block:nth-of-type(6n+3):hover .year-container .year{margin-left:5rem}.yp-block:nth-of-type(6n+3):hover .project-block{width:15rem;height:15rem}.yp-block:nth-of-type(6n+3):hover .project-block .project-name{opacity:1}.yp-block:nth-of-type(6n+3):hover .project-block:nth-of-type(3n+3){width:18rem}.yp-block:nth-of-type(6n+3):hover .project-block:nth-of-type(3n+3) .project-img-container{padding-bottom:75%}.yp-block:nth-of-type(6n+4){transform:translateY(26rem);display:flex;flex-direction:column;margin-left:2rem}.yp-block:nth-of-type(6n+4) .year-separator{height:3.75rem;top:.25rem;left:0}.yp-block:nth-of-type(6n+4) .year-container{height:3.75rem;width:10rem;margin-top:.25rem;display:flex;align-items:flex-end}.yp-block:nth-of-type(6n+4) .year-container .year{margin-top:.5rem;justify-content:start}.yp-block:nth-of-type(6n+4) .project-block .project-img{top:auto;left:auto;right:0;bottom:0}.yp-block:nth-of-type(6n+4) .text-deco{left:0;top:0;width:100%;height:100%}.yp-block:nth-of-type(6n+4):hover .text-deco{left:7.5rem;width:7.5rem;height:1rem}.yp-block:nth-of-type(6n+4):hover .project-block{width:15rem;height:15rem}.yp-block:nth-of-type(6n+4):hover .project-block .project-name{opacity:1}.yp-block:nth-of-type(6n+4):hover .project-block:nth-of-type(2n){width:18rem}.yp-block:nth-of-type(6n+4):hover .project-block:nth-of-type(2n) .project-img-container{padding-bottom:75%}.yp-block:nth-of-type(6n+5){display:flex;flex-direction:column;justify-content:flex-end;margin-left:2rem}.yp-block:nth-of-type(6n+5) .year-separator{height:4.5rem;bottom:0;left:0}.yp-block:nth-of-type(6n+5) .year-container{width:100%;align-self:flex-end;margin-top:.25rem;order:2}.yp-block:nth-of-type(6n+5) .year-container .year{justify-content:start}.yp-block:nth-of-type(6n+5) .projects-container{display:flex}.yp-block:nth-of-type(6n+5) .project-block{width:13.5rem;height:13.5rem}.yp-block:nth-of-type(6n+5) .project-block .project-img-container{padding-bottom:75%}.yp-block:nth-of-type(6n+5) .project-block .project-img{top:auto;left:auto;right:0;bottom:0}.yp-block:nth-of-type(6n+5) .text-deco{left:0;bottom:-6.75rem;width:11rem;height:11rem}.yp-block:nth-of-type(6n+5):hover .text-deco{left:8.75rem;width:8.75rem;height:1rem}.yp-block:nth-of-type(6n+5):hover .project-block{width:17.5rem;height:17.5rem}.yp-block:nth-of-type(6n+5):hover .project-block .project-name{opacity:1}.yp-block:nth-of-type(6n+5):hover .project-block:nth-of-type(2n){width:15rem}.yp-block:nth-of-type(6n+5):hover .project-block:nth-of-type(2n) .project-img-container{padding-bottom:100%}.yp-block:nth-of-type(6n){transform:translateY(27rem);display:flex;flex-direction:column;justify-content:flex-start;margin-left:2rem}.yp-block:nth-of-type(6n) .year-separator{height:15%;top:0;left:3rem}.yp-block:nth-of-type(6n) .year-container{height:3rem;width:100%;align-self:flex-end}.yp-block:nth-of-type(6n) .year-container .year{margin-top:1rem;margin-left:3rem}.yp-block:nth-of-type(6n) .project-block .project-img{top:auto;left:auto;right:0;bottom:0}.yp-block:nth-of-type(6n) .text-deco{left:5rem;top:65%;width:5rem;height:35%}.yp-block:nth-of-type(6n):hover .year-container .year{margin-left:5rem}.yp-block:nth-of-type(6n):hover .text-deco{left:0;top:0;width:1rem;height:100%}.yp-block:nth-of-type(6n):hover .project-block{width:15rem;height:15rem}.yp-block:nth-of-type(6n):hover .project-block .project-name{opacity:1}.yp-block:nth-of-type(6n):hover .project-block:nth-of-type(2n){width:18rem}.yp-block:nth-of-type(6n):hover .project-block:nth-of-type(2n) .project-img-container{padding-bottom:75%}.projects-container.quad{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,max-content);grid-auto-flow:column;gap:1rem}}