@layer components {
	.sine-top{
		--row-gap: 4.375rem;

		padding-block: 4.6875rem 2rem;
		position: relative;
	}

	@media(min-width: 768px){
		.sine-top{
			padding-block-end: 8.9375rem;
		}
	}

	.sine-top:before{
		content: '';
		position: absolute;
		background-image: url(/images/wave-divider-shadow.png);
		background-repeat: repeat;
		left: 0;
		top: -93px;
		width: 100vw;
		height: 93px;
	}

	.sine-top > h2{
		text-align: center;
	}

	.sine-bottom{
		--row-gap: 4.375rem;
		position: relative;
		padding-block-end: 4.6875rem;
	}

	.sine-bottom:after{
		content: '';
		position: absolute;
		background-image: url(/images/wave-divider-shadow.png);
		background-repeat: repeat;
		left: 0;
		bottom: -93px;
		width: 100vw;
		height: 93px;
		transform: scaleY(-1);
	}

	.sine-bottom + section{
		padding-block-start: 9rem;
	}
}