/*
 * 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);
	}
}