.c-banner {
	position: relative;

	@media (width <= 768px) {
		display: flex;
		flex-direction: column;
	}

	&.c-banner--background-blue {
		background-color: var(--color-blue);

		.c-banner__column--left {
			background-color: var(--color-blue);
		}
	}

	&.c-banner--background-grey {
		background-color: var(--color-grey-light);

		.c-banner__title {
			color: var(--color-blue);
		}

		.c-banner__column--left {
			background-color: var(--color-grey-light);
		}
	}

	&.c-banner--background-yellow {
		background-color: var(--color-yellow);
		color: var(--color-white);

		.c-banner__title {
			color: var(--color-white);
		}

		.c-banner__column--left {
			background-color: var(--color-yellow);
		}
	}

	.c-banner__image {
		&.c-banner__image--overlay {
			&:after {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: var(--color-primary);
				opacity: 0.3;
			}
		}

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

	.c-banner__container {
		position: relative;
		display: flex;

		@media (width <= 768px) {
			flex-direction: column;
			gap: var(--spacing-md);
			order: 1;
			padding-top: var(--spacing-lg);
			padding-bottom: var(--spacing-lg);
		}

		&.c-banner__container--has-right-column {
			@media (width > 768px) {
				min-height: 400px;
			}
		}
	}

	.c-banner__column {
		flex: 1;

		@media (width > 768px) {
			padding: calc(var(--spacing-md) * 2) 0;
		}

		&.c-banner__column--extra-padding {
			@media (width > 768px) {
				padding: 160px 0 60px;
			}
		}

		&.c-banner__column--left {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: var(--spacing-sm);
			z-index: 1;

			@media (width <= 768px) {
				order: 1;
			}

			@media (width > 768px) {
				gap: var(--spacing-md);
			}

			&.c-banner__column--narrow {
				@media (width > 1024px) {
					max-width: 40%;
				}

				@media (width > 768px) and (width <= 1024px) {
					max-width: 50%;
				}
			}
		}

		.c-banner_logo {
			max-width: 200px;
			height: auto;
		}

		.c-banner__preferred-distributor {
			display: inline-flex;
			align-items: center;
			gap: calc(var(--spacing-xs) / 3);
			padding: calc(var(--spacing-xs) / 3) var(--spacing-xs);
			border-radius: 20px;
			background-color: var(--color-gold);
			color: var(--color-white);

			svg {
				width: auto;
				height: 12px;
			}
		}

		&.c-banner__column--text {
			@media (width <= 768px) {
				order: 1;
			}
		}

		&.c-banner__column--image {
			position: relative;

			@media (width <= 768px) {
				position: relative;
				margin: calc(var(--spacing-lg) * -1) calc(var(--gutter) * -1) 0;
				aspect-ratio: 2;
				order: 0;
			}

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

	.c-banner__container--has-right-column .c-banner__column--left {
		@media (width > 768px) {
			padding-right: var(--spacing-md);
		}
	}

	.c-banner__title {
		color: var(--color-white);

		@media (width > 768px) and (width <= 1280px) {
			font-size: calc(1.375rem + 1.5vw);
		}
	}

	.c-banner__left-column-text {
		p {
			&:last-of-type {
				margin-bottom: 0;
			}
		}
	}

	.c-banner__button-wrapper {
		display: flex;
		flex-wrap: wrap;
		gap: calc(var(--spacing-md) / 2);
	}

	.c-banner__right-column-text {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;

		@media (width > 768px) {
			height: 100%;
		}
	}

	.c-banner__park-types {
		display: flex;
		flex-wrap: wrap;
		gap: var(--spacing-xs);
	}

	.c-banner__park-type {
		display: flex;
		align-items: center;
		gap: var(--spacing-xs);
		font-weight: bold;

		img,
		svg {
			width: auto;
			height: 20px;
		}
	}

	.c-banner__full-right-column {
		@media (width <= 768px) {
			position: relative;
			aspect-ratio: 2;
			order: 0;
		}

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

		&.c-banner__full-right-column--image {
			&.c-banner__right-column-image--large {
				@media (width > 768px) {
					width: 60%;
					height: 100%;
					position: absolute;
					top: 0;
					right: 0;
				}
			}

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