/*!***********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./src/block-library/custom/banner/style.css ***!
  \***********************************************************************************************************************************************************************************************/
/** ======================
 ** BANNER GENERIC
 ** ==================== */

.banner__badge {
	position: absolute;
	transform: translate(
		calc(var(--wp--preset--spacing--40) * -1),
		calc(var(--wp--preset--spacing--40) * -1)
	);

	display: grid;
	justify-items: center;
	align-items: center;

	background: var(--wp--preset--color--primary);

	line-height: 1;
	color: var(--wp--preset--color--white);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--large);

	width: -moz-fit-content;

	width: fit-content;
	padding: 1.75em;

	aspect-ratio: 1;
	border-radius: 50%;

	z-index: 99;
}

/** ======================
 ** BANNER LIGHT BG
 ** ==================== */

.banner-light-bg {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--20);

	border: 1px solid var(--wp--preset--color--black);

	padding-inline: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--50);

	@media screen and (min-width: 800px) {
		grid-template-columns: 0.6fr 0.4fr;
		gap: var(--wp--preset--spacing--40);
	}
}

.banner-light-bg__content h2 {
	margin-top: 0;
}

.banner-light-bg__content .wp-block-button {
	margin-top: var(--wp--preset--spacing--30);
}

/** ======================
 ** BANNER GREY BG
 ** ==================== */
.banner-grey-bg {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--grey-extra-light);
	align-items: center;

	@media screen and (min-width: 800px) {
		grid-template-columns: 0.5fr 0.5fr;
		gap: var(--wp--preset--spacing--50);
	}
}

.banner-grey-bg__content {
	@media screen and (min-width: 800px) {
		margin-inline-end: var(--wp--preset--spacing--40);
	}
}

.banner-grey-bg__content > div {
	width: 90%;
	margin-inline: auto;

	@media screen and (min-width: 800px) {
		width: 100%;
	}
}

.banner-grey-bg__content h2 {
	margin-top: 0;
}

.banner-grey-bg__content .wp-block-button {
	margin-block: var(--wp--preset--spacing--20);
}


/*# sourceMappingURL=style-index.css.map*/