[block-type="portfolio"] {
	display:flex;
	position:relative;
	flex-flow: row wrap;
	width: 100%;
	margin-left:-8px;
}

[block-type="portfolio"] > [block-type="portfolio_item"] {
	position:relative;
	overflow:hidden;
	background-color:#EEE;
	flex:auto;
	width:25%;
	width:calc(25% - 8px);
	margin: 0 0 8px 8px;
}

@media screen and (max-width: 768px) {
	[block-type="portfolio"] {
		margin-left:-6px;
	}
	[block-type="portfolio"] > [block-type="portfolio_item"] {
		width:33.33%;
		width:calc(33.33% - 6px);
		margin: 0 0 6px 6px;
	}
}

@media screen and (max-width: 512px) {
	[block-type="portfolio"] {
		margin-left:-4px;
	}
	[block-type="portfolio"] > [block-type="portfolio_item"] {
		width:50%;
		width:calc(50% - 4px);
		margin: 0 0 4px 4px;
	}
}

@media screen and (max-width: 320px) {
	[block-type="portfolio"] {
		margin-left:0;
	}
	[block-type="portfolio"] > [block-type="portfolio_item"] {
		margin: 0 0 4px;
	}
}

[block-type="portfolio_item"]::after {
	content: "";
	display: block;
	height: 0;
}
[data-shape] > [block-type="portfolio_item"]::after {
	padding-bottom: 100%;
}
[data-shape="tall"] > [block-type="portfolio_item"]::after {
	padding-bottom: 150%;
}
[data-shape="wide"] > [block-type="portfolio_item"]::after {
	padding-bottom:66%;
}

@supports (display: grid) {
	[block-type="portfolio"] {
		display: grid;
		position:relative;
		grid-gap: 8px;
		grid-template-columns: repeat(4, 1fr);
		grid-auto-flow: row dense;
		margin-left:0;
	}
	[block-type="portfolio"][data-shape="small"] {
		grid-template-columns: repeat(8, 1fr);
	}

	[block-type="portfolio"] > [block-type="portfolio_item"] {
		flex:none;
		margin: 0;
		width:100%;
	}

	[block-type="portfolio"] > [data-scale-width="2"] {
		grid-column-end: span 2;
	}

	[block-type="portfolio"] > [data-scale-height="2"] {
		grid-row-end: span 2;
	}

	[data-shape] > [data-scale-width="2"][data-scale-height="1"]::after {
		padding-bottom:50%;
	}
	[data-shape="tall"] > [data-scale-width="2"][data-scale-height="1"]::after {
		padding-bottom:75%;
	}
	[data-shape="wide"] > [data-scale-width="2"][data-scale-height="1"]::after {
		padding-bottom:33%;
	}

	@media screen and (max-width: 768px) {
		[block-type="portfolio"] {
			grid-gap: 6px;
			grid-template-columns: repeat(3, 1fr);
		}
		[block-type="portfolio"][data-shape="small"] {
			grid-template-columns: repeat(6, 1fr);
		}
	}

	@media screen and (max-width: 512px) {
		[block-type="portfolio"] {
			grid-gap: 4px;
			grid-template-columns: repeat(2, 1fr);
		}
		[block-type="portfolio"][data-shape="small"] {
			grid-template-columns: repeat(4, 1fr);
		}
	}

	@media screen and (max-width: 320px) {
		[block-type="portfolio"] {
			grid-gap: 4px 0;
			grid-template-columns: repeat(1, 1fr);
		}
		[block-type="portfolio"][data-shape="small"] {
			grid-template-columns: repeat(2, 1fr);
		}
	}
}



[block-type="portfolio_item"] > .media {
	position:absolute;
	width:100%;
	height:100%;
}


[block-type="portfolio_item"] > .content {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	overflow:hidden;
}

[block-type="portfolio_item"]:hover > .content {
	background-color:rgba(0 0 0 / 50%);
	color:white;
}

.ProseMirror [block-type="portfolio_item"] > .content {
	pointer-events:none;
}
.ProseMirror [block-type="portfolio_item"] > .content > * {
	pointer-events:auto;
}