@layer components{.project-gallery{--margin:100px;--padding:20px;width:min(calc(100% - var(--padding)),var(--layout-width));min-height:calc(100vh - (var(--navigation-height) + var(--margin)*2));border-top:var(--layout-border-dashed);border-bottom:var(--layout-border-dashed);margin:0 auto 40px;display:flex;position:relative}@media (width>=520px) and (width<=920px){.project-gallery{--padding:50px}}.project-gallery__outer{flex-direction:column;gap:36px;width:100%;margin:0 auto;padding:30px 0;display:flex;position:relative}.project-gallery__outer:before{content:"";background:linear-gradient(to bottom right,transparent 0%,var(--blue)25%,var(--magenta)50%,var(--blue)75%,transparent 100%);opacity:.1;z-index:-1;width:100%;height:100%;position:absolute;top:0;left:0}.project-gallery__inner{grid-template-columns:repeat(auto-fit,320px);justify-content:center;align-items:flex-start;gap:18px;display:grid}.project-gallery__filters{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;display:flex}.project-gallery__filters-title{font-size:var(--p);color:var(--grey-600);margin:0;font-weight:700}.project-gallery__filter{text-decoration:none}.project-gallery__filter--current{background-color:hsl(var(--grey-800))}.project-gallery__item{cursor:pointer;border:var(--layout-border);transition:.16s var(--transition-easing);flex-direction:column;text-decoration:none;transition-property:background-color,border;display:flex;position:relative;overflow:hidden}.project-gallery__item:is(:hover,:focus){background-color:var(--grey-000)}.project-gallery__image{object-fit:cover;width:100%;height:200px;transition:transform .32s var(--transition-easing)}.project-gallery__item:is(:hover,:focus) .project-gallery__image{transform:scale(1.1)}.project-gallery__content{background-color:var(--grey-000);border-top:var(--layout-border);opacity:.9;justify-content:space-between;gap:8px;width:100%;padding:8px;display:flex;position:absolute;bottom:0;left:0}.project-gallery__title{font-family:var(--serif-font);font-size:var(--p);color:var(--grey-600);font-weight:700}.project-gallery__kind{font-family:var(--monospace-font);font-size:var(--label);color:var(--grey-800);background-color:var(--grey-100);border:var(--layout-border);border-radius:var(--radius-100);padding:2px 6px}}