[data-vp-layout=grid] .vp-portfolio__items{margin-left:calc(var(--vp-items__gap)*-1);margin-top:calc(var(--vp-items__gap-vertical)*-1)}[data-vp-layout=grid] .vp-portfolio__item-wrap .vp-portfolio__item{margin-left:var(--vp-items__gap);margin-top:var(--vp-items__gap-vertical)}[data-vp-grid-images-aspect-ratio*=":"] .vp-portfolio__item-img,[data-vp-grid-images-aspect-ratio*=":"] .vp-portfolio__item-img img{bottom:0;left:0;position:absolute;right:0;top:0}[data-vp-grid-images-aspect-ratio*=":"] .vp-portfolio__item-img-wrap{display:block;overflow:hidden;position:relative}[data-vp-grid-images-aspect-ratio*=":"] .vp-portfolio__item-img-wrap:before{content:"";display:block;padding-top:56%}[data-vp-grid-images-aspect-ratio*=":"] .vp-portfolio__item-img img{height:100%;-o-object-fit:var(--vp-images__object-fit);object-fit:var(--vp-images__object-fit);-o-object-position:var(--vp-images__object-position);object-position:var(--vp-images__object-position);width:100%}

/*
 * Custom: CSS fallback when JS is delayed/disabled (e.g. Jetpack Boost defer).
 * :where() keeps specificity equal to JS-injected rules, so JS wins when active.
 */
[data-vp-layout="grid"] .vp-portfolio__items{display:flex;flex-wrap:wrap}
:where([data-vp-layout="grid"][data-vp-grid-columns="1"]) .vp-portfolio__item-wrap{width:100%}
:where([data-vp-layout="grid"][data-vp-grid-columns="2"]) .vp-portfolio__item-wrap{width:50%}
:where([data-vp-layout="grid"][data-vp-grid-columns="3"]) .vp-portfolio__item-wrap{width:33.3333%}
:where([data-vp-layout="grid"][data-vp-grid-columns="4"]) .vp-portfolio__item-wrap{width:25%}
:where([data-vp-layout="grid"][data-vp-grid-columns="5"]) .vp-portfolio__item-wrap{width:20%}
@media (max-width:768px){:where([data-vp-layout="grid"]) .vp-portfolio__item-wrap{width:50%}}