article>:not(div,picture,figure){margin-inline:auto;max-inline-size:var(--container-small)}.mockup-small{margin-inline:auto;max-inline-size:22.5rem;padding:var(--space-xs)}.mockup-medium{margin-inline:auto;padding:var(--space-s)}.graphic{margin-inline:auto;max-inline-size:50%}figure:has(.project-screen){max-inline-size:-moz-fit-content;max-inline-size:fit-content}:not(.flex) :where(figure:has(.project-screen),.project-screen){margin-inline:auto}.flex>:has(.project-screen){flex-basis:content;flex-grow:0}@supports not (flex-basis:content){.flex-item:first-of-type>:where(figure,picture){float:right}}.project-screen{max-inline-size:22.5rem}.project-screen img{filter:drop-shadow(0 3px 8px rgba(48,54,53,.07))}figure.has-annotation{max-inline-size:-moz-max-content;max-inline-size:max-content}:not(.flex) figure.has-annotation{margin-inline:auto}@supports not (margin-inline:auto){:not(.flex) figure.has-annotation{margin-left:auto;margin-right:auto}}figure.has-annotation{--connector-length:var(--space-m);--annotation-width:20ch}.annotation{--marker-size:var(--space-3xs);--connector-margin:0px;background-color:var(--surface);border:var(--dashed-border);font-size:var(--text-xs);line-height:var(--line-height-xs);margin-block-start:calc(var(--connector-length)/2);margin-inline:auto;max-block-size:-moz-max-content;max-block-size:max-content;max-inline-size:var(--annotation-width);padding:var(--space-3xs);position:relative;text-wrap:balance}.annotation:before{block-size:var(--connector-length);inline-size:var(--border-s);left:calc(50% - var(--border-s)/2)}.annotation:after,.annotation:before{background:currentColor;content:"";display:block;position:absolute;top:calc(0px - var(--connector-length) - var(--connector-margin))}.annotation:after{block-size:var(--marker-size);border-radius:9999px;inline-size:var(--marker-size);left:calc(50% - var(--marker-size)/2)}@media screen and (min-width:48.05rem){figure.has-annotation{position:relative}figure.has-annotation-connector-l{--connector-length:var(--space-l)}figure.has-annotation-connector-xl{--connector-length:var(--space-xl)}figure.has-annotation-connector-2xl{--connector-length:var(--space-2xl)}:is(.annotation-top,.annotation-top-left,.annotation-top-right,.annotation-left,.annotation-right,.annotation-bottom-left,.annotation-bottom-right){margin-block-start:unset;position:absolute}figure.has-annotation-top{margin-block-start:calc(var(--connector-length) + var(--line-height-xs)*2 + var(--space-3xs)*2)}.annotation-top{left:calc(50% - var(--annotation-width)/2);top:calc(0px - var(--connector-length)/2 - var(--line-height-xs)*2 - var(--space-3xs)*2)}.annotation-top:after,.annotation-top:before{bottom:calc(0px - var(--connector-length) - var(--connector-margin));top:unset}:is(.annotation-right,.annotation-left){top:50%}:is(.annotation-top-right,.annotation-top-left){top:4%}:is(.annotation-bottom-right,.annotation-bottom-left){bottom:4%}:is(.annotation-right,.annotation-top-right,.annotation-bottom-right){left:unset;right:calc(0px - var(--connector-length)/2 - var(--annotation-width))}:is(.annotation-left,.annotation-top-left,.annotation-bottom-left){left:calc(0px - var(--connector-length)/2 - var(--annotation-width))}:is(.annotation-right,.annotation-top-right,.annotation-bottom-right,.annotation-left,.annotation-top-left,.annotation-bottom-left):before{block-size:var(--border-s);inline-size:var(--connector-length);top:calc(.5lh - var(--border-s)/2)}:is(.annotation-right,.annotation-top-right,.annotation-bottom-right,.annotation-left,.annotation-top-left,.annotation-bottom-left):after{top:calc(.5lh - var(--marker-size)/2)}:is(.annotation-right,.annotation-top-right,.annotation-bottom-right):before{left:calc(0px - var(--connector-length) - var(--connector-margin))}:is(.annotation-right,.annotation-top-right,.annotation-bottom-right):after{left:calc(0px - var(--connector-length) - var(--connector-margin))}:is(.annotation-left,.annotation-top-left,.annotation-bottom-left):before{left:unset;right:calc(0px - var(--connector-length) - var(--connector-margin))}:is(.annotation-left,.annotation-top-left,.annotation-bottom-left):after{left:unset;right:calc(0px - var(--connector-length) - var(--connector-margin))}@supports not (height:1lh){:is(.annotation-right,.annotation-top-right,.annotation-bottom-right,.annotation-left,.annotation-top-left,.annotation-bottom-left):before{top:calc(var(--line-height-xs)/2 - var(--border-s)/2)}:is(.annotation-right,.annotation-top-right,.annotation-bottom-right,.annotation-left,.annotation-top-left,.annotation-bottom-left):after{top:calc(var(--line-height-xs)/2 - var(--marker-size)/2)}}}@media screen and (min-width:48.05rem){.project-screen.overlap-top{margin-block-start:calc(0px - var(--space-xl))}.project-screen.overlap-left{left:calc(0px - var(--space-l));position:relative;z-index:1}.project-screen.rotate-10{transform:rotate(10deg)}.project-screen.rotate-10-reverse{transform:rotate(-10deg)}.project-screen.rotate-5{transform:rotate(5deg)}.project-screen.rotate-5-reverse{transform:rotate(-5deg)}picture[class*=rotate]:not(:last-child){margin-block-end:var(--space-l)}picture[class*=rotate]:not(.overlap-top){margin-block-start:var(--space-l)}:where([class*=overlap])+.annotation{z-index:2}.project-screen.rotate-5+.annotation-top-left,.project-screen.rotate-5-reverse+.annotation-bottom-left{transform:translateX(var(--space-l))}.project-screen.rotate-10+.annotation-top-left,.project-screen.rotate-10-reverse+.annotation-bottom-left{transform:translateX(var(--space-m))}.project-screen.rotate-5+.annotation-bottom-right,.project-screen.rotate-5-reverse+.annotation-top-right{transform:translateX(calc(0px - var(--space-l)))}.project-screen.rotate-10+.annotation-bottom-right{transform:translateX(var(--space-2xl))}.mockup-small+:is(.annotation-top-right,.annotation-right,.annotation-bottom-right){transform:translateX(calc(0px - var(--space-l)))}.mockup-small+:is(.annotation-top-left,.annotation-left,.annotation-bottom-left){transform:translateX(var(--space-l))}}.screen-gallery .project-screen{margin-inline:unset}.screen-gallery figcaption{z-index:2}@media (min-width:48rem){.screen-gallery>.flex{flex-wrap:nowrap}.screen-gallery .flex-item+.flex-item{margin-inline-start:calc(0px - var(--space-l));z-index:1}}.related{border-block:var(--dashed-border);padding-block:var(--space-s)}.related .button{align-items:start;inline-size:unset;min-inline-size:unset;text-wrap:balance}