.wp-block-visual-portfolio-item-image {
	position: relative;
	margin: 0;

	// The border support of the block lands on the figure, and a wrapper does
	// not clip the corners of what it holds - the radius has to travel down to
	// the picture and through the link between them.
	img {
		display: block;
		width: 100%;
		height: auto;
		border-radius: inherit;
	}

	// The link is the box the overlay is positioned against.
	> a {
		position: relative;
		display: block;
		border-radius: inherit;
	}

	// Editor stand-in for an item that has no image yet, drawn the way core
	// draws a post with no featured image: a wash of the current colour with a
	// single stroke across it.
	&__placeholder {
		position: relative;
		width: 100%;
		aspect-ratio: 1;
		overflow: hidden;

		&::before {
			position: absolute;
			inset: 0;
			pointer-events: none;
			content: "";
			background: currentcolor;
			opacity: 0.1;
		}
	}

	&__placeholder-illustration {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		stroke: currentcolor;
		opacity: 0.25;
	}

	&__overlay {
		position: absolute;
		inset: 0;
		background-color: #000;
		border-radius: inherit;

		&.has-background-gradient {
			background-color: transparent;
		}

		// Core generates these levels for the Cover block only, and its
		// stylesheet is not guaranteed to be on the page.
		@for $i from 0 through 10 {
			&.has-background-dim-#{$i * 10} {
				opacity: #{$i * 0.1};
			}
		}
	}
}