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