.photos{--photo-overlay-transparent:50%;margin-top:calc(2.5 * var(--rhythmic-unit));gap:calc(.5 * var(--rhythmic-unit));grid-template-columns:1fr;display:grid}.photo__title{font-family:var(--font-family-mono), monospace;font-size:var(--font-size-smaller);letter-spacing:1px;text-transform:uppercase;transition:var(--transition-slow) transform;font-weight:700;transform:translateY(10px)}.photo__figure{align-items:stretch;width:100%;height:100%;margin:0;display:flex;position:relative;&:has(.photo__link:hover),&:has(.photo__link:focus-visible),&:has(.photo__link:active){& .photo__overlay{opacity:1}& .photo__title{transform:none}}}.photo__link{border-radius:var(--border-radius);box-shadow:0 0 var(--border-width) var(--border-width) var(--color-surface);flex:0 0 100%;overflow:hidden;&:hover,&:focus-visible,&:active{& .photo__picture{transform:scale(1.05)}}}.photo__picture{width:100%;height:100%;transition:var(--transition-slow) transform;& img{object-fit:cover;object-position:center;width:100%;height:100%}}.photo__overlay{opacity:0;background:linear-gradient(to top, #000000b3 0%, transparent var(--photo-overlay-transparent));transition:var(--transition-slow) opacity;padding:var(--rhythmic-unit);color:#fff;z-index:2;pointer-events:none;border-radius:var(--border-radius);align-items:flex-end;display:flex;position:absolute;inset:0}.photo__filters{gap:calc(.5 * var(--rhythmic-unit));flex-wrap:wrap;margin-block-start:calc(1.5 * var(--rhythmic-unit));margin-block-end:calc(2.5 * var(--rhythmic-unit));display:flex}.photo__filter{border:var(--border--no-animation);color:var(--color-text-secondary);padding:calc(.5 * var(--rhythmic-unit)) var(--rhythmic-unit);font-size:var(--font-size-smaller);font-family:var(--font-family-mono), monospace;cursor:pointer;transition:var(--transition-mode) color, var(--transition-mode) border-color, var(--transition-mode) background-color, var(--transition-mode) outline-color;outline-color:var(--color-link);background:0 0;border-radius:20px;&:hover,&:focus-visible,&:active{border-color:var(--color-text--no-animation);color:var(--color-text--no-animation)}&.active{background:var(--color-text--no-animation);color:var(--color-bg--no-animation);border-color:var(--color-text--no-animation)}}.photos--real .photo__link{&:before{content:"";z-index:2;transition:var(--transition-slow) opacity, var(--transition-slow) backdrop-filter;opacity:0;pointer-events:none;user-select:none;border-radius:var(--border-radius);background:#00000073;position:absolute;inset:0}&:after{content:"";z-index:2;width:60px;height:60px;transition:var(--transition-slow) opacity, var(--transition-slow) transform;opacity:0;background:#fff;position:absolute;top:calc(50% - 30px);left:calc(50% - 30px);transform:scale(.8);mask:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path fill=\"%23FFF\" fill-rule=\"evenodd\" d=\"M19 2a1 1 0 00-1-1h-6a1 1 0 100 2h3.586l-3.793 3.793a1 1 0 001.414 1.414L17 4.414V8a1 1 0 102 0V2zM1 18a1 1 0 001 1h6a1 1 0 100-2H4.414l3.793-3.793a1 1 0 10-1.414-1.414L3 15.586V12a1 1 0 10-2 0v6z\"/></svg>") 50%/contain no-repeat}&:hover,&:focus-visible,&:active{&:before{opacity:1;backdrop-filter:blur(2px)}&:after{opacity:.7;transform:scale(1)}}}@media (width>=540px) and (width<700px){.photos{grid-template-columns:repeat(2,1fr)}.photo:nth-child(5n+1){--photo-overlay-transparent:80%;grid-column:span 2}}@media (width>=700px){.photos{grid-template-columns:repeat(6,1fr)}.photo{--photo-overlay-transparent:100%;grid-column:span 2;&:nth-child(16n+1){--photo-overlay-transparent:50%;grid-column:span 6}&:nth-child(16n+2),&:nth-child(16n+3),&:nth-child(16n+7),&:nth-child(16n+8),&:nth-child(16n+15),&:nth-child(16n+16){--photo-overlay-transparent:70%;grid-column:span 3}&:nth-child(16n+4),&:nth-child(16n+10){--photo-overlay-transparent:60%;grid-area:span 2/span 4}}}