.cta-card__inner {
	width: 100%;
}

.cta-card__card {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"title title"
		"text text"
		"media actions";
	overflow: hidden;
	border-radius: 1rem;
	padding: 1.5rem 1.25rem 0;
	gap: 0.85rem;
}

.cta-card__panel {
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	overflow: hidden;
	isolation: isolate;
}

.cta-card__background {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	pointer-events: none;
	background-image: var(--cta-card-bg, none);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
	mix-blend-mode: multiply;
	opacity: .3;
}

.cta-card__panel--bg-white {
	background-color: var(--color-white);
}

.cta-card__panel--bg-black {
	background-color: var(--color-black);
}

.cta-card__panel--bg-ocean {
	background-color: var(--color-ocean);
}

.cta-card__panel--bg-lime {
	background-color: var(--color-lime);
}

.cta-card__panel--bg-pearl {
	background-color: var(--color-pearl);
}

.cta-card__panel--bg-porcelain {
	background-color: var(--color-porcelain);
}

.cta-card__panel--bg-light-ocean {
	background-color: var(--color-light-ocean);
}

.cta-card__content {
	display: contents;
}

.cta-card__heading {
	grid-area: title;
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	width: 100%;
	text-align: left;
}

.cta-card__heading .pre-title {
	justify-content: flex-start;
	text-align: left;
}

.cta-card__heading .pre-title::before {
	display: none;
}

.cta-card__content > h2 {
	grid-area: title;
	position: relative;
	z-index: 1;
}

.cta-card__content > .section-text {
	grid-area: text;
	position: relative;
	z-index: 1;
}

.cta-card__panel--bg-black ~ .cta-card__content h2,
.cta-card__panel--bg-ocean ~ .cta-card__content h2,
.cta-card__panel--bg-black ~ .cta-card__content .pre-title,
.cta-card__panel--bg-ocean ~ .cta-card__content .pre-title,
.cta-card__panel--bg-black ~ .cta-card__content > .section-text,
.cta-card__panel--bg-ocean ~ .cta-card__content > .section-text {
	color: var(--color-white);
}

.cta-card__panel--bg-black ~ .cta-card__content .pre-title::before,
.cta-card__panel--bg-black ~ .cta-card__content .pre-title::after,
.cta-card__panel--bg-ocean ~ .cta-card__content .pre-title::before,
.cta-card__panel--bg-ocean ~ .cta-card__content .pre-title::after {
	background: var(--color-white);
}

.cta-card__media {
	grid-area: media;
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	min-width: 0;
	align-self: end;
}

.cta-card__image {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	object-position: bottom left;
	position: relative;
	left: -0.5rem;
}

.cta-card__actions {
	grid-area: actions;
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.65rem;
	padding-bottom: 1.5rem;
	min-width: 180px;
	justify-content: center;
}

.cta-card__card:not(:has(.cta-card__media)) {
	grid-template-columns: 1fr;
	grid-template-areas:
		"title"
		"text"
		"actions";
}

.cta-card__card:not(:has(.cta-card__actions)) {
	grid-template-columns: 1fr;
	grid-template-areas:
		"title"
		"text"
		"media";
}

.cta-card__card:not(:has(.cta-card__actions)) .cta-card__media {
	display: flex;
	justify-content: center;
	width: 100%;
}

.cta-card__card:not(:has(.cta-card__actions)) .cta-card__image {
	width: auto;
	max-width: min(16rem, 72%);
	left: 0;
	margin-inline: auto;
	object-position: bottom center;
}

.cta-card .mbm-button.cta-card__button {
	justify-content: center;
	width: 100%;
	white-space: normal;
	text-align: center;
}

@media (min-width: 768px) {
	.cta-card__card {
		padding: 2rem 1.5rem 0;
		gap: 1rem;
	}

	.cta-card__image {
		left: 0;
	}
}

@media (min-width: 992px) {
	.cta-card {
		overflow: visible;
	}

	.cta-card__inner {
		overflow: visible;
		padding-top: 2rem;
	}

	.cta-card__card {
		grid-template-columns: minmax(12rem, 0.42fr) minmax(0, 1fr);
		grid-template-areas: "media content";
		align-items: stretch;
		overflow: visible;
		border-radius: 0;
		padding: 0;
		gap: 0;
		min-height: 0;
	}

	.cta-card__panel {
		border-radius: 1.25rem;
	}

	.cta-card__background {
		background-repeat: repeat-x;
		background-position: center center;
		background-size: auto;
		opacity: .3;
	}

	.cta-card__media {
		grid-area: media;
		align-self: end;
		z-index: 2;
		height: auto;
		max-height: 20rem;
		margin-top: -2rem;
		max-width: none;
	}

	.cta-card__image {
		width: auto;
		max-width: none;
		height: auto;
		max-height: 22rem;
		object-fit: contain;
		object-position: bottom center;
		left: 10%;
		top: -2rem;
	}

	.cta-card__content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		gap: 1rem;
		grid-area: content;
		position: relative;
		z-index: 1;
		padding: 1.5rem 3rem 1.5rem 10%;
	}

	.cta-card__heading,
	.cta-card__content > h2,
	.cta-card__content > .section-text {
		grid-area: auto;
	}

	.cta-card__heading {
		align-items: flex-start;
	}

	.cta-card__content > .section-text {
		max-width: 36rem;
	}

	.cta-card__actions {
		grid-area: auto;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		padding-bottom: 0;
		gap: 0.75rem;
	}

	.cta-card .mbm-button.cta-card__button {
		width: auto;
		max-width: 100%;
	}

	.cta-card__card:not(:has(.cta-card__media)) {
		grid-template-columns: 1fr;
		grid-template-areas: "content";
	}

	.cta-card__card:not(:has(.cta-card__actions)) {
		grid-template-columns: minmax(12rem, 0.42fr) minmax(0, 1fr);
		grid-template-areas: "media content";
	}

	.cta-card__card:not(:has(.cta-card__actions)) .cta-card__media {
		display: block;
		width: auto;
	}

	.cta-card__card:not(:has(.cta-card__actions)) .cta-card__image {
		max-width: none;
		margin-inline: 0;
		left: 10%;
		object-position: bottom center;
	}

	.cta-card__card--image-right {
		grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.42fr);
		grid-template-areas: "content media";
	}

	.cta-card__card--image-right:not(:has(.cta-card__actions)) {
		grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.42fr);
		grid-template-areas: "content media";
	}

	.cta-card__card--image-right .cta-card__media {
		right: 20%;
	}

	.cta-card__card--image-right .cta-card__content {
		left: 5%;
		padding: 1.5rem 10% 1.5rem 3rem;
	}

	.cta-card__card--image-right .cta-card__image {
		left: auto;
		right: 10%;
	}

	.cta-card__card--image-right:not(:has(.cta-card__actions)) .cta-card__image {
		left: auto;
		right: 10%;
	}

	.cta-card--layout-higher .section-container {
		max-width: calc(var(--container) / 1.2);
	}

	.cta-card--layout-higher .cta-card__card {
		min-height: 400px;
	}

	.cta-card--layout-higher .cta-card__heading {
		max-width: 350px;
	}

	.cta-card--layout-higher .cta-card__content > .section-text {
		max-width: 16rem;
	}

	.cta-card--layout-higher .cta-card__card--image-right .cta-card__image {
		right: 40%;
	}

	.cta-card--layout-higher .cta-card__card--image-right .cta-card__content {
		left: 6%;
	}
}