.block-about {
	--cwp-image: 344px;
	position: relative;

}


.block-about  .block-about__inner { /* inner does NOT include the as seen in group */
	background: var(--wp--preset--color--backdrop);
	background-size: cover;
}

.block-about__image,
.editor-styles-wrapper .wp-block-group:not(.is-layout-constrained) > .block-about__image {
	max-width: var(--cwp-image);
}

.block-about__image {
	
}

.block-about__asi {
	background: var(--wp--preset--color--primary);
}

@media only screen and (max-width: 760px) {

	body .block-about {
		margin-left: calc( -1 * var(--wp--custom--layout--padding) );
		margin-right: calc( -1 * var(--wp--custom--layout--padding) );
	}

	.block-about .block-about__inner,
	.editor-styles-wrapper .block-about .block-about__inner {
		display: block;
		background-image: url(about-block-mobile-bg.png);
		padding: 40px 32px 0px;
	}

	.block-about .block-about__image {
		margin: 16px auto 0;
	}

	.block-about__asi {
		padding: 20px 16px;
	}

}


@media only screen and (min-width: 761px) {

	.block-about {
		align-items: center;
	}

	.block-about .block-about__inner {
		background-image: url(about-block-desktop-bg.png);
	}

	.block-about__content {
		flex-basis: 0;
		flex-grow: 1;
	}

	.block-about__image {
		align-self: flex-end;
	}

	.block-about__asi {
		padding: 20px 40px;
	}

	/* Body Layout = Full Width */
	body:is(.full-width-content) .block-about {
		--cwp-image: 285px;
	}

	body:is(.full-width-content) .block-about__inner {
		padding: 16px 40px 0 80px;
		gap: 80px;
	}

	body:is(.full-width-content) .block-about__content {
		padding: 16px 0 40px 0;
	}


	/* Body Layout = content & content sidebar layout */
	body:is(.content, .content-sidebar) .block-about {
		--cwp-image: 308px;
	}

	body:is(.content, .content-sidebar) .block-about__inner {
		padding: 46px 0 0 40px;
		gap: 40px;
	}

	body:is(.content, .content-sidebar) .block-about__content {
		padding: 0 0 40px 0;
	}


}


/* sidebar */
.block-area-sidebar .block-about {
	--cwp-image: 285px !important;
}

.block-area-sidebar .block-about .block-about__inner {
	padding: 40px 16px 0px;
	background-image: url(about-block-mobile-bg.png);
}

.block-area-sidebar .block-about .block-about__inner {
	display: block;
}

.block-area-sidebar .block-about .block-about__content {
	padding: 0;
}

.block-area-sidebar .block-about .block-about__image {
	margin: 16px auto 0;
}

.block-area-sideba .block-about__asi { /* as seen in not meant to be used in sidebar, but just in case */
	padding: 20px 16px;
}