/* Rounded square images and soft frosted labels from Irene’s reference. */
.screen-geometry{position:absolute;pointer-events:none}
.work-map{--project-height:var(--portfolio-square-size)}
.project-card{width:var(--project-height);padding:4px;border:0;border-radius:var(--portfolio-square-radius);overflow:hidden;background:var(--neutral-0);box-shadow:none;backdrop-filter:none;transition:none}
.project-card:hover,.project-card:focus-visible{translate:none;background:var(--neutral-0);box-shadow:none}
.project-card:focus-visible{outline:2px solid var(--neutral-600);outline-offset:8px;border-radius:24px}
.project-art{height:100%;border-radius:28px;overflow:hidden;clip-path:inset(0 round 28px)}
.project-name{
 position:absolute;z-index:1;right:20px;bottom:20px;width:max-content;
 transform:scale(calc(1 / var(--map-scale,1)));transform-origin:right bottom;
 padding:2px 7px;border:0;outline:none;border-radius:var(--pill-radius);
 background:color-mix(in srgb,var(--map-paper) 68%,transparent);color:var(--color-background-action-primary);
 backdrop-filter:blur(20px) saturate(.65);-webkit-backdrop-filter:blur(20px) saturate(.65);
 box-shadow:none;
 font:400 9px/16px var(--sans);letter-spacing:0;text-transform:none;
}
.inno-art>img{width:110%;left:10%;top:16%;height:auto}
.carrefour-art>img{height:110%;left:50%;right:auto;top:-4%;width:auto;transform:translateX(-50%) rotate(8deg)}
.project-carrefour:hover .project-art>img{transform:translateX(-50%) rotate(4deg) translateY(-6px)}
.spotify-art>img{width:68%;right:16%;top:8%;height:auto}
@media(min-width:761px){
 .project-card{padding:8px}
 .project-art{border-radius:24px;clip-path:inset(0 round 24px)}
}
@media(max-width:760px){
 .project-list{padding-top:0;gap:24px}
 .project-card{width:100%;height:auto;aspect-ratio:1;padding:4px;border-radius:var(--portfolio-square-radius)}
 .project-art{position:absolute;inset:4px;height:auto}
}