section.cta
{
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	position: relative;
	padding-left: clamp(1rem, 10dvw, 900px);
	padding-right: clamp(1rem, 10dvw, 900px);
	background-image: linear-gradient(rgba(255,255,255,0) 50%, rgba(255,255,255,1) 100%);
	
	div.cta-wrapper
	{
		flex-basis: 100%;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 2rem;
		
		main
		{
			position: relative;
			
			div.icon-wrapper
			{
				position: absolute;
				right: 2rem;
				top: 0px;
				padding: 1rem;
				background: var(--verduyn-gold);
				color: white;
				display: flex;
				justify-content: center;
				align-items: center;
				z-index: 3;
			}
			
			div.content-wrapper
			{
				position: relative;
				margin-top: 3rem;
				background: var(--verduyn-blue);
				padding: .5rem 2rem 2rem 2rem;
				
				h1,h2,h3
				{
					color: white;
					font-size: 1.67rem;
					margin-bottom: 1rem;
				}
				
				h4,h5
				{
					color: var(--verduyn-gold);
					font-size: 1rem;
					margin-bottom: 0;
				}
				
				p
				{
					color: white;
					margin-block-start: 0;
					margin-block-end: 0;
				}
				
				p:not(::last-chid)
				{
					margin-block-end: 1rem;
				}
			}
			
			div.content-wrapper::before
			{
				content: '';
				position: absolute;
				top: calc(1px - 1.5rem);
				left: 0px;
				height: 1.5rem;
				width: 50%;
				background: var(--verduyn-blue);
				clip-path: polygon(0 0, 92.5% 0, 100% 100%, 0 100%);
				user-select: none;
				pointer-events: none;
			}

			div.content-wrapper::after
			{
				content: '';
				position: absolute;
				top: calc(1px - 1.5rem);
				right: 0px;
				height: 1.5rem;
				width: 50%;
				background: var(--verduyn-blue);
				clip-path: polygon(7.5% 0, 100% 0, 100% 100%, 0 100%);
				user-select: none;
				pointer-events: none;
			}
		}
	}
}