.c-modal {
	position: relative;
	width: calc(100% - var(--spacing-lg));
	max-width: 768px;
	padding: var(--spacing-sm);
	border-width: 0;
	background: var(--color-white);
	box-shadow: 0 2px 8px rgb(from var(--color-black) r g b / 0.33);
	transition-behavior: allow-discrete;

	@media (width >= 768px) and (width < 1280px) {
		padding: var(--spacing-md);
	}

	@media (width >= 1280px) {
		width: calc(100% - var(--spacing-lg) * 2);
		padding: var(--spacing-lg);
	}

	&::backdrop  {
		background-color: rgb(from var(--color-black) r g b / 0.4);
		transition: all .3s ease-in-out;
		transition-behavior: allow-discrete;
	}

	&.c-modal--full {
		max-width: 100%;
	}

	&.c-modal--part-rounded {
		border-top-left-radius: 15px;
		border-bottom-right-radius: 15px;
	}

	&.c-modal--background-blue-light {
		background-color: var(--color-blue-light);
	}

	&.c-modal--background-green {
		background-color: var(--color-greener);

		.c-modal__close {
			background-color: var(--color-green-light);
		}
	}

	.c-modal__close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		background-color: var(--color-primary);
		color: var(--color-white);
		border: 0;
		border-radius: 50%;
		transition: background-color 0.3s;

		@media (width <= 768px) {
			justify-self: flex-end;
			margin-bottom: var(--spacing-xs);
		}

		@media (width > 768px) {
			position: absolute;
			z-index: 1;
		}

		@media (width > 768px) and (width < 1280px) {
			top: calc(var(--spacing-sm) / 2);
			right: calc(var(--spacing-sm) / 2);
		}

		@media (width > 1280px) {
			top: var(--spacing-sm);
			right: var(--spacing-sm);
		}

		svg {
			width: 30px;
			height: 30px;
			transform: rotate(45deg);
		}

		&:hover,
		&:focus {
			background-color: var(--color-secondary);
		}
	}

	.c-modal__background-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		z-index: -2;
	}

	.c-modal__background-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgb(from var(--color-black) r g b / 0.2);
		z-index: -1;
	}

	.c-modal__inner {
		&.c-modal__inner--flex {
			display: flex;
			gap: var(--spacing-md);
		}
	}

	.c-modal__tiles {
		display: flex;
		flex-wrap: wrap;
		gap: var(--spacing-xs);
		flex: 1 0 40%;
		margin: calc(var(--spacing-md) * -1) calc(var(--spacing-md) * -1) calc(var(--spacing-md) * -1) 0;

		@media (width > 1280px) {
			margin: calc(var(--spacing-lg) * -1) calc(var(--spacing-lg) * -1) calc(var(--spacing-lg) * -1) 0;
		}

		@media (width <= 768px) {
			display: none;
		}
	}

	.c-modal__tile {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: flex-end;
		flex: 1;
		padding: calc(var(--spacing-xs) / 2);
		color: var(--color-white);

		img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			z-index: -1;
		}
	}

	.c-modal__tile-text {
		text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
		font-weight: 500;
		line-height: 1;
	}

	.c-modal__logo-wrapper {
		max-width: 300px;

		img,
		svg {
			width: 100%;
			height: auto;
		}
	}

	.c-modal__content {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-sm);
		color: var(--color-primary);

		&.c-modal__content--border {
			padding: var(--spacing-md);
			border: 1px solid var(--color-white);

			@media (width >= 768px) and (width < 1280px) {
				padding: var(--spacing-md);
			}

			@media (width >= 1280px) {
				padding: var(--spacing-lg);
			}
		}

		&.c-modal__content--center {
			align-items: center;

			h1,h2,h3,h4,h5,h6,p {
				text-align: center;
			}
		}

		&.c-modal__content--white {
			color: var(--color-white);

			h1,h2,h3,h4,h5,h6,p {
				color: inherit;
			}
		}

		&.c-modal__content--heading-light {
			h1,h2,h3,h4,h5,h6 {
				font-weight: 400;
			}
		}

		iframe {
			width: 100%;
			height: 60vh;
		}
	}

	.c-modal__buttons {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: var(--spacing-sm);
	}

	.c-modal__disclaimer {
		color: var(--color-grey);
	}
}