@layer components {
	.modal-backdrop{
		position: absolute;
		background-color: rgba(0,0,0,.2);
		top: 0;
		right: 0;
		left: 0;
		height: 100vh;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: background-color .3s;
	}

	.modal-backdrop.hide{
		background-color: rgba(0,0,0,0);
		pointer-events: none;
	}

	.modal{
		background-color: hsl(var(--clr-off-white));
		background-image: url(/images/swirlies-tan-cropped.png);
		background-position: center bottom;
		padding: 75px 57px 50px;
		border: 1px solid hsl(0, 0%, 44%);
		border-radius: 3px;
		text-align: center;
		max-width: 46.25rem;
		box-shadow: -3px 3px 16px rgba(0,0,0,.33);
		position: relative;
		opacity: 1;
		transition: opacity .3s;
	}

	.modal.hide{
		opacity: 0;
	}

	.modal img{
		border: none;
		display: inline-block;
		margin: 1rem 0;
	}

	.modal .copy{
		margin-bottom: 3.125rem;
	}

	.modal .modal-close:not(.btn){
		position: absolute;
		top: .75rem;
		right: 1rem;
		background: none;
		padding: 0;
		font-family: FontAwesome;
		line-height: 1;
		font-size: 2rem;
	}
}