.portfolio-gallery{--portf-grid-size:290px;--portf-grid-gap:0;--portf-text-color:#fff;--portf-overlay-color:rgba(0,0,0,.5);--portf-trans-d:600ms;--portf-trans-e:cubic-bezier(0.19,1,0.22,1);position:relative;z-index:1}.portfolio-filters{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-bottom:2rem}.portfolio-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--portf-grid-size,15rem),1fr));grid-gap:var(--portf-grid-gap,0);justify-items:center;padding:0}.portfolio-item.hide{display:none}.portfolio-item.show{display:block}.portfolio-content{aspect-ratio:1/1;backface-visibility:hidden;color:var(--portf-text-color);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding:1em;position:relative;text-align:center;text-decoration:none}.portfolio-content:after{background:var(--portf-overlay-color);content:"";height:100%;left:0;opacity:1;position:absolute;top:0;transition:opacity var(--portf-trans-d) var(--portf-trans-e);width:100%}.portfolio-content>*{z-index:1}.portfolio-content img{filter:grayscale(0);height:100%;left:0;margin:0;object-fit:cover;position:absolute;top:0;transition:filter .2s ease,transform .25s linear;width:100%;z-index:-1}.portfolio-text{align-items:center;display:flex;flex-direction:column;padding:1rem;position:relative;transition:transform var(--portf-trans-d) var(--portf-trans-e);width:100%;z-index:1}.portfolio-text *{color:inherit;margin:0}.portfolio-text>*+*{margin-top:10px}.portfolio-text>a.button,.portfolio-text>a.button:focus,.portfolio-text>a.button:hover{color:inherit /* !important */}.portfolio-text>a.button{margin-top:1rem}@media (hover:hover) and (min-width:600px){.portfolio-text{transform:translateY(50%)}.portfolio-text>*{opacity:0;transform:translateY(1rem);transition:transform var(--portf-trans-d) var(--portf-trans-e),opacity var(--portf-trans-d) var(--portf-trans-e)}.portfolio-content:after{opacity:0}.portfolio-content:focus-within .portfolio-text,.portfolio-content:hover .portfolio-text{transform:translateY(0)}.portfolio-content:focus-within .portfolio-text>*,.portfolio-content:hover .portfolio-text>*{opacity:1;transform:translateY(0);transition-delay:calc(var(--portf-trans-d)/8)}.portfolio-content:focus-within .portfolio-text,.portfolio-content:focus-within .portfolio-text>*{transition-duration:0s}.portfolio-content:focus:after,.portfolio-content:hover:after{opacity:1}.portfolio-content:focus img,.portfolio-content:hover img{filter:grayscale(1);transform:scale(1.05) rotate(1deg)}}