@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400&family=Playfair+Display:wght@400&family=Space+Grotesk:wght@400&display=swap');
/* Same typefaces and monograms as the corresponding inspiration concepts. */
.project-ristorante{--project-font:'Cormorant Garamond',Georgia,serif}
.project-architetto{--project-font:'Space Grotesk',Arial,sans-serif}
.project-bnb{--project-font:'Playfair Display',Georgia,serif}
.project b{font-family:var(--project-font);font-weight:400;font-size:clamp(25px,2.6vw,40px);letter-spacing:-.035em;line-height:1.1;text-wrap:balance}
.project:after{background:linear-gradient(0deg,#000d,transparent 65%)}
.project>.concept-mark{position:absolute;top:26px;left:26px;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:76px;height:76px;line-height:1;letter-spacing:-.05em;color:white;font-family:var(--project-font);font-size:42px;font-weight:400;background:#141414cf;box-shadow:0 5px 24px #0003}
.concept-mark>span{display:block}
.project>.mark-ristorante{border:1px solid;border-radius:50%}
.mark-ristorante>span:last-child{font-size:.37em;align-self:flex-end;margin:0 0 20% -.12em;letter-spacing:-.03em}
.project>.mark-architetto{border-left:2px solid;border-bottom:2px solid;align-items:flex-end;padding-bottom:8px;letter-spacing:-.09em}
.mark-architetto>span:last-child{font-size:.8em}
.project>.mark-bnb{border:1px solid;border-radius:45% 45% 0 0}
.mark-bnb>span:last-child{font-size:.58em;margin:.65em 0 0 -.22em}
@media(max-width:700px){.project b{font-size:36px}.project>.concept-mark{width:64px;height:64px;font-size:36px}}