.layout-fragments{--color: #f8c422}@media only screen and (orientation:landscape){.layout-fragments{overflow:scroll hidden}}@media only screen and (orientation:portrait){.layout-fragments{overflow:hidden scroll}.layout-fragments:before{content:"";background:linear-gradient(180deg,#444a4c 10%,#0000 90%);position:fixed;top:0;left:0;height:25vh;width:100vw;z-index:1}}.layout-fragments>.grid{height:calc(var(--vh, 1vh) * 100 - 6rem);margin-top:8rem;position:relative;padding:0 1rem}.layout-fragments>.grid>article{height:fit-content}.layout-fragments>.grid>article:hover{z-index:1}.layout-fragments>.grid>article>a{display:flex;height:auto;width:100%}.layout-fragments>.grid>article figure{max-height:60vh;height:auto;width:100%}.layout-fragments>.grid>article figure:has(>video){-webkit-mask:linear-gradient(to top,transparent 0,#fff 1rem calc(100% - 1rem),transparent 100%),linear-gradient(to left,transparent 0,#fff 1rem calc(100% - 1rem),transparent 100%);-webkit-mask-size:100% 100%;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;-webkit-mask-composite:source-in;mask:linear-gradient(to top,transparent 0,#fff 1rem calc(100% - 1rem),transparent 100%),linear-gradient(to left,transparent 0,#fff 1rem calc(100% - 1rem),transparent 100%);mask-size:100% 100%;mask-position:center;mask-repeat:no-repeat;mask-composite:intersect}.layout-fragments>.grid>article figure>picture,.layout-fragments>.grid>article figure>video{left:unset;transform:none;max-height:60vh;height:auto;width:100%;-webkit-mask:linear-gradient(to top,transparent 0,#fff 1rem calc(100% - 1rem),transparent 100%),linear-gradient(to left,transparent 0,#fff 1rem calc(100% - 1rem),transparent 100%);-webkit-mask-size:100% 100%;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;-webkit-mask-composite:source-in;mask:linear-gradient(to top,transparent 0,#fff 1rem calc(100% - 1rem),transparent 100%),linear-gradient(to left,transparent 0,#fff 1rem calc(100% - 1rem),transparent 100%);mask-size:100% 100%;mask-position:center;mask-repeat:no-repeat;mask-composite:intersect}.layout-fragments>.grid>article figure>picture>img,.layout-fragments>.grid>article figure>video>img{-webkit-mask:linear-gradient(to top,transparent 0,#fff 1rem calc(100% - 1rem),transparent 100%),linear-gradient(to left,transparent 0,#fff 1rem calc(100% - 1rem),transparent 100%);-webkit-mask-size:100% 100%;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;-webkit-mask-composite:source-in;mask:linear-gradient(to top,transparent 0,#fff 1rem calc(100% - 1rem),transparent 100%),linear-gradient(to left,transparent 0,#fff 1rem calc(100% - 1rem),transparent 100%);mask-size:100% 100%;mask-position:center;mask-repeat:no-repeat;mask-composite:intersect;max-height:60vh;height:auto;width:100%;object-fit:cover}.layout-fragments>.grid>article figure>figcaption{color:#000;text-align:left;position:absolute;top:0;white-space:nowrap;left:0;padding:1rem;height:fit-content;background-color:var(--color);transform:unset;display:none;-webkit-mask:linear-gradient(to top,transparent 0,#fff 1rem calc(100% - 1rem),transparent 100%),linear-gradient(to left,transparent 0,#fff 1rem calc(100% - 1rem),transparent 100%);-webkit-mask-size:100% 100%;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;-webkit-mask-composite:source-in;mask:linear-gradient(to top,transparent 0,#fff 1rem calc(100% - 1rem),transparent 100%),linear-gradient(to left,transparent 0,#fff 1rem calc(100% - 1rem),transparent 100%);mask-size:100% 100%;mask-position:center;mask-repeat:no-repeat;mask-composite:intersect}.layout-fragments>.grid>article.zoom>*{transform:scale(1.25)}@media only screen and (orientation:landscape){.layout-fragments>.grid>article.zoom>* figcaption{font-size:.8rem}}@media only screen and (orientation:portrait){.layout-fragments>.grid>article.zoom>* figcaption{display:none!important}}.layout-fragments>.grid>article.unzoom>*{transform:scale(.85)}.layout-fragments>.grid>article.unzoom>* figcaption{font-size:1.18rem}.layout-fragments .relateds-works{--color: #d2a372}.layout-fragments .relateds-events{--color: #6662a8}.layout-fragments .relateds-research{--color: #a04f85}.layout-fragments .relateds-fragments{--color: #f8c422}.layout-fragments .relateds-info{--color: }html:not(.touch) .layout-fragments>.grid>article:hover figure:has(>video){background-color:var(--color)}html:not(.touch) .layout-fragments>.grid>article:hover a picture,html:not(.touch) .layout-fragments>.grid>article:hover a>video{background-color:var(--color)}html:not(.touch) .layout-fragments>.grid>article:hover figcaption{display:initial}html:not(.touch) .layout-fragments:has(.fragment-0:hover) .fragment-0 picture,html:not(.touch) .layout-fragments:has(.fragment-0:hover) .fragment-0>video{background-color:var(--color)}html:not(.touch) .layout-fragments:has(.fragment-1:hover) .fragment-1 picture,html:not(.touch) .layout-fragments:has(.fragment-1:hover) .fragment-1>video{background-color:var(--color)}html:not(.touch) .layout-fragments:has(.fragment-2:hover) .fragment-2 picture,html:not(.touch) .layout-fragments:has(.fragment-2:hover) .fragment-2>video{background-color:var(--color)}html:not(.touch) .layout-fragments:has(.fragment-3:hover) .fragment-3 picture,html:not(.touch) .layout-fragments:has(.fragment-3:hover) .fragment-3>video{background-color:var(--color)}html:not(.touch) .layout-fragments:has(.fragment-4:hover) .fragment-4 picture,html:not(.touch) .layout-fragments:has(.fragment-4:hover) .fragment-4>video{background-color:var(--color)}html:not(.touch) .layout-fragments:has(.fragment-5:hover) .fragment-5 picture,html:not(.touch) .layout-fragments:has(.fragment-5:hover) .fragment-5>video{background-color:var(--color)}html:not(.touch) .layout-fragments:has(.fragment-6:hover) .fragment-6 picture,html:not(.touch) .layout-fragments:has(.fragment-6:hover) .fragment-6>video{background-color:var(--color)}html:not(.touch) .layout-fragments:has(.fragment-7:hover) .fragment-7 picture,html:not(.touch) .layout-fragments:has(.fragment-7:hover) .fragment-7>video{background-color:var(--color)}html:not(.touch) .layout-fragments:has(.fragment-8:hover) .fragment-8 picture,html:not(.touch) .layout-fragments:has(.fragment-8:hover) .fragment-8>video{background-color:var(--color)}html:not(.touch) .layout-fragments:has(.fragment-9:hover) .fragment-9 picture,html:not(.touch) .layout-fragments:has(.fragment-9:hover) .fragment-9>video{background-color:var(--color)}html:not(.touch) .layout-fragments:has(.fragment-10:hover) .fragment-10 picture,html:not(.touch) .layout-fragments:has(.fragment-10:hover) .fragment-10>video{background-color:var(--color)}html:not(.touch) .layout-fragments:has(.fragment-11:hover) .fragment-11 picture,html:not(.touch) .layout-fragments:has(.fragment-11:hover) .fragment-11>video{background-color:var(--color)}html:not(.touch) .layout-fragments:has(.fragment-12:hover) .fragment-12 picture,html:not(.touch) .layout-fragments:has(.fragment-12:hover) .fragment-12>video{background-color:var(--color)}html:not(.touch) .layout-fragments:has(.fragment-13:hover) .fragment-13 picture,html:not(.touch) .layout-fragments:has(.fragment-13:hover) .fragment-13>video{background-color:var(--color)}html:not(.touch) .layout-fragments:has(.fragment-14:hover) .fragment-14 picture,html:not(.touch) .layout-fragments:has(.fragment-14:hover) .fragment-14>video{background-color:var(--color)}html:not(.touch) .layout-fragments:has(.fragment-15:hover) .fragment-15 picture,html:not(.touch) .layout-fragments:has(.fragment-15:hover) .fragment-15>video{background-color:var(--color)}html:not(.touch) .layout-fragments:has(.fragment-16:hover) .fragment-16 picture,html:not(.touch) .layout-fragments:has(.fragment-16:hover) .fragment-16>video{background-color:var(--color)}html:not(.touch) .layout-fragments:has(.fragment-17:hover) .fragment-17 picture,html:not(.touch) .layout-fragments:has(.fragment-17:hover) .fragment-17>video{background-color:var(--color)}html:not(.touch) .layout-fragments:has(.fragment-18:hover) .fragment-18 picture,html:not(.touch) .layout-fragments:has(.fragment-18:hover) .fragment-18>video{background-color:var(--color)}html:not(.touch) .layout-fragments:has(.fragment-19:hover) .fragment-19 picture,html:not(.touch) .layout-fragments:has(.fragment-19:hover) .fragment-19>video{background-color:var(--color)}html:not(.touch) .layout-fragments:has(.fragment-20:hover) .fragment-20 picture,html:not(.touch) .layout-fragments:has(.fragment-20:hover) .fragment-20>video{background-color:var(--color)}html:not(.touch) .layout-fragments:has(.fragment-21:hover) .fragment-21 picture,html:not(.touch) .layout-fragments:has(.fragment-21:hover) .fragment-21>video{background-color:var(--color)}html:not(.touch) .layout-fragments:has(.fragment-22:hover) .fragment-22 picture,html:not(.touch) .layout-fragments:has(.fragment-22:hover) .fragment-22>video{background-color:var(--color)}html:not(.touch) .layout-fragments:has(.fragment-23:hover) .fragment-23 picture,html:not(.touch) .layout-fragments:has(.fragment-23:hover) .fragment-23>video{background-color:var(--color)}html:not(.touch) .layout-fragments:has(.fragment-24:hover) .fragment-24 picture,html:not(.touch) .layout-fragments:has(.fragment-24:hover) .fragment-24>video{background-color:var(--color)}html:not(.touch) .layout-fragments:has(.fragment-25:hover) .fragment-25 picture,html:not(.touch) .layout-fragments:has(.fragment-25:hover) .fragment-25>video{background-color:var(--color)}html:not(.touch) .layout-fragments:has(.fragment-26:hover) .fragment-26 picture,html:not(.touch) .layout-fragments:has(.fragment-26:hover) .fragment-26>video{background-color:var(--color)}html:not(.touch) .layout-fragments:has(.fragment-27:hover) .fragment-27 picture,html:not(.touch) .layout-fragments:has(.fragment-27:hover) .fragment-27>video{background-color:var(--color)}html:not(.touch) .layout-fragments:has(.fragment-28:hover) .fragment-28 picture,html:not(.touch) .layout-fragments:has(.fragment-28:hover) .fragment-28>video{background-color:var(--color)}html:not(.touch) .layout-fragments:has(.fragment-29:hover) .fragment-29 picture,html:not(.touch) .layout-fragments:has(.fragment-29:hover) .fragment-29>video{background-color:var(--color)}html:not(.touch) .layout-fragments:has(.fragment-30:hover) .fragment-30 picture,html:not(.touch) .layout-fragments:has(.fragment-30:hover) .fragment-30>video{background-color:var(--color)}html.touch .layout-fragments>.grid>article figure:has(>video){background-color:var(--color)}html.touch .layout-fragments>.grid>article a picture,html.touch .layout-fragments>.grid>article a>video{background-color:var(--color)}html.touch .layout-fragments>.grid>article figcaption{display:initial}