.background-noise {
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--c-blue-lt);
	opacity: 0.75;

	&.warm {
		background: linear-gradient(45deg, var(--c-beige) 0%, var(--c-rose) 60%, var(--c-peach) 100%);
	}

	&.cool {
		background: linear-gradient(45deg,
			var(--c-blue-dk) 0%,
			var(--c-bg-md) 30%,
			var(--c-bg-lt) 50%,
			var(--c-bg-md) 70%,
			var(--c-blue-dk) 100%);
	}

	&:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: transparent;
		background-position: center;
		background-size: 182px;
		background-repeat: repeat;
		opacity: 0.65;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'%3E%3C/rect%3E%3C/svg%3E") !important;
	}

	~ * {
		position: relative;
	}
}