portfolio-grid{--aspect-ratio: 3 / 4;position:relative}.portfolio-grid--buttons{display:none;position:absolute;top:-3rem;right:0;align-items:center;justify-content:flex-end;gap:.625rem;padding:0 var(--container-gutter)}.portfolio-grid--button{display:inline-flex;align-items:center;justify-content:center;width:5.25rem;height:1.5rem}.portfolio-grid--button.active{pointer-events:none}.portfolio-grid--button:not(.active){opacity:.5}.portfolio-grid--projects-container{position:relative;transition:opacity var(--transition-duration) var(--transition-ease)}portfolio-grid.transitioning .portfolio-grid--projects-container{opacity:0;pointer-events:none}.portfolio-grid--projects{display:grid;grid-template-columns:repeat(1,1fr)}.portfolio-grid--project{position:relative}.portfolio-grid--project-image{position:relative;aspect-ratio:3 / 4}.portfolio-grid--project-image:after{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:color-mix(in srgb,var(--color-taupe-light) 50%,transparent);mix-blend-mode:multiply}.portfolio-grid--project-title{position:absolute;top:50%;right:50%;color:var(--color-accent);transform:translate(50%,-50%);text-align:center;text-wrap:balance;max-width:20rem;z-index:1;pointer-events:none}portfolio-grid:not(.half-view) .portfolio-grid--project-title{position:absolute;overflow:hidden;height:1px;width:1px;margin:-1px;padding:0;border:0;clip:rect(0 0 0 0)}.portfolio-grid--projects-active{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.portfolio-grid--projects-active>div{position:sticky;top:0;display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:var(--aspect-ratio);padding:var(--container-gutter)}.portfolio-grid--projects-active>div>span{display:block;width:100%;max-width:20rem;color:var(--color-accent);text-align:center;text-wrap:balance}portfolio-grid.half-view .portfolio-grid--projects-active{display:none}@media(min-width:768px){portfolio-grid{--aspect-ratio: 3 / 2}.portfolio-grid{padding-top:4.5rem}.portfolio-grid--buttons{display:flex}.portfolio-grid--project-image{aspect-ratio:var(--aspect-ratio)}portfolio-grid.half-view .portfolio-grid--projects{grid-template-columns:repeat(2,1fr)}portfolio-grid.half-view .portfolio-grid--projects:has(>*:nth-child(odd):last-child)>*:last-child{grid-column:span 2}}
/*# sourceMappingURL=/cdn/shop/t/7/assets/portfolio-grid.css.map */