.block-hero-header,
.entry-content .block-hero-header,
.block-area .block-hero-header,
.editor-styles-wrapper .wp-block-cwp-hero-header {
	max-width: calc(var(--wp--custom--layout--wide) - 2 * var(--wp--custom--layout--padding));
	margin-left: auto;
	margin-right: auto;
}

.block-hero-header:first-child {
	margin-top: calc(-1 * var(--wp--custom--layout--block-gap-large));
}

.editor-styles-wrapper .block-hero-header:first-child {
	margin-top: 0;
}

.editor-styles-wrapper .block-editor-block-list__layout.is-root-container > .wp-block-cwp-hero-header {
	max-width: none;
}

.editor-styles-wrapper .wp-block.wp-block-cwp-hero-header.has-background {
	background-color: transparent !important;
	padding: 0;
}

.block-hero-header__image {
	grid-area: 1/1;
	margin-left: calc(-1 * var(--wp--custom--layout--padding));
	margin-right: calc(-1 * var(--wp--custom--layout--padding));
}
.block-hero-header__image img {
	width: 100%;
}

@supports( aspect-ratio: 1 ) {
	.block-hero-header__image img,
	.editor-styles-wrapper .block-hero-header__image img {
		aspect-ratio: 1260 / 482;
		object-fit: cover;
	}
}

.block-hero-header__content {
	max-width: var(--wp--custom--layout--content);
	width: 100%;
	margin: 0 auto;
	background-color: var(--wp--preset--color--background);
	align-self: center;
    justify-self: center;
    grid-area: 1/1;
}

.block-hero-header__content .breadcrumb,
.editor-styles-wrapper .block-hero-header__content .breadcrumb {
	margin-bottom: 0;
}

.block-hero-header .block-hero-header__inner {
	padding: 2rem var(--wp--custom--layout--padding) 2.25rem;
}

.block-hero-header .block-hero-header__inner.has-background {
	padding: 2rem var(--wp--custom--layout--padding) 0.5rem;
}


.block-hero-header__inner > * {
	margin-top: 0;
	margin-bottom: 2rem;
}

.block-hero-header__content:first-child {
	margin: var(--wp--custom--layout--block-gap-large) 0 0;
}

.block-hero-header__content:first-child .breadcrumb {
	background-color: transparent;
	color: var(--wp--preset--color--black);
	padding: 0;
}

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

	.block-hero-header__content {
		margin-left: calc(-1 * var(--wp--custom--layout--padding));
		margin-right: calc(-1 * var(--wp--custom--layout--padding));
		width: auto;
	}

	.block-hero-header .block-hero-header__inner.has-background-background-color {
		padding-bottom: 0;
	}

	.block-hero-header + :is(.alignfull, .alignwide).has-background,
	.entry-content .block-hero-header + :is(.alignfull, .alignwide).has-background {
		margin-top: var(--wp--custom--layout--block-gap);
	}

	.block-hero-header:has(.block-hero-header__inner.has-background-background-color) + :is(.alignfull, .alignwide).has-background-background-color,
	.entry-content .block-hero-header:has(.block-hero-header__inner.has-background-background-color) + :is(.alignfull, .alignwide).has-background-background-color,
	.block-hero-header:has(.block-hero-header__inner.has-primary-background-color) + :is(.alignfull, .alignwide).has-primary-background-color,
	.entry-content .block-hero-header:has(.block-hero-header__inner.has-primary-background-color) + :is(.alignfull, .alignwide).has-primary-background-color {
		margin-top: 0;
	}
	.block-hero-header:has(.block-hero-header__inner.has-primary-background-color) + :is(.alignfull, .alignwide).has-primary-background-color,
	.entry-content .block-hero-header:has(.block-hero-header__inner.has-primary-background-color) + :is(.alignfull, .alignwide).has-primary-background-color {
		padding-top: 0;
	}

	.block-hero-header__inner.has-background-background-color::after {
		content: "";
		display: block;
		height: 1px;
		background-color: var(--wp--custom--color--hairline);
		margin-top: var(--wp--custom--layout--block-gap);
	}

	.block-hero-header:has(+ .has-primary-background-color) .block-hero-header__inner.has-background-background-color::after {
		display: none;
	}
}

@media only screen and (min-width: 768px) {
	.block-hero-header {
		display: grid;
    	grid: auto-flow 1fr/1fr;
	}

	.block-hero-header:first-child {
		margin-bottom: 2rem;
	}

	.block-hero-header__content {
		margin: 100px var(--wp--custom--layout--padding);
    	width: calc(100% - 2 * var(--wp--custom--layout--padding));
	}

	.block-hero-header__image img,
	.editor-styles-wrapper .block-hero-header__image img {
		height: 100%;
		object-fit: cover;
	}

	.block-hero-header .block-hero-header__inner,
	.block-hero-header .block-hero-header__inner.has-background {
		padding-left: 2.625rem;
		padding-right: 2.625rem;
	}
}