.c-image-text-splash {
	&.c-image-text-splash--large {
		position: relative;
		padding: var(--spacing-sm) 0;
		min-height: 800px;

		@media (width <= 768px) {
			min-height: 600px;
		}
	}

	&.c-image-text-splash--wide {
		position: relative;

		&.c-image-text-splash--grey {
			color: var(--color-primary);
			background: var(--color-grey-light);
		}

		&.c-image-text-splash--blue {
			color: var(--color-white);
			background-color: var(--color-primary);
		}

		&.c-image-text-splash--light-blue {
			color: var(--color-blue);
			background-color: var(--color-blue-light);
		}

		.c-image-text-splash__content {
			padding-left: 0;
		}
	}

	&.c-image-text-splash--normal {
		.c-image-text-splash__image-wrapper {
			position: relative;

			@media (width <= 768px) {
				aspect-ratio: 2;
			}
		}

		.c-image-text-splash__inner {
			display: grid;

			@media (width <= 768px) {
				grid-template-columns: 1fr;
				grid-template-rows: min-content 1fr;
			}

			@media (width > 768px) {
				grid-template-columns: auto 1fr;
				grid-template-rows: 1fr;
			}
		}
	}

	.c-image-text-splash__content {
		padding: 20px;
		position: relative;
		z-index: 1;

		@media (width > 768px) {
			padding: 70px 40px;
			max-width: 450px;
			width: 450px;
		}

		&.c-image-text-splash__content--grey {
			color: var(--color-primary);
			background: var(--color-grey-light);
		}

		&.c-image-text-splash__content--blue {
			color: var(--color-white);
			background-color: var(--color-primary);
		}

		&.c-image-text-splash__content--light-blue {
			color: var(--color-blue);
			background-color: var(--color-blue-light);
		}

		h2 {
			color: inherit;
			margin-top: 0;
		}
	}

	.c-image-text-splash__buttons {
		margin-top: 20px;
		display: flex;
		flex-wrap: wrap;
		gap: calc(var(--spacing-lg) / 2);
	}

	.c-image-text-splash__image-wrapper {
		.c-image-text-splash__image {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		&.c-image-text-splash__image-wrapper--wide {
			@media (width < 768px) {
				position: relative;
				aspect-ratio: 2;
			}

			@media (width >= 768px) {
				position: absolute;
				top: 0;
				right: 0;
				width: 50%;
				height: 100%;
			}
		}
	}
}