.block-personal-note::before {
	background: url(photo.jpg) no-repeat center;
	background-size: cover;
	content: '';
	display: block;
	width: calc( 100% + calc( 2 * var(--wp--custom--layout--padding) ) );
	height: 300px;
	margin-top: calc( -1 * var(--wp--custom--layout--block-gap) );
	margin-inline: calc( -1 * var(--wp--custom--layout--padding) );
	margin-bottom: var(--wp--custom--layout--block-gap);
}

.block-personal-note::after {
	content: "";
	display: block;
	width: 108px;
	height: 58px;
	background: url(signature.png) no-repeat left top;
	background-size: contain;
	margin-top: var(--wp--custom--layout--block-gap);
}

@media only screen and (min-width: 767px) {
	.block-personal-note.has-background {
		--wp--custom--layout--padding: 24px;
	}
}