.nebrin-ledenportaal-block
{
	display: flex;
	flex-direction: column;
	gap: 4rem;
	align-items: center;
	padding: 0 clamp(1em, 5dvw, 10em);

	.portaal-wrapper
	{
    	display: grid;
		padding: 1em 2em;
		background: white;
    	grid-template-columns: 1fr 1fr 1fr;
    	align-items: center;
    	grid-gap: 2rem;
		
		.portal-link
		{
			display: flex;
			position: relative;
			flex-wrap: wrap;
			padding: .5em 1em;
			justify-content: flex-end;
			text-decoration: none;
            position: relative;
			color: var(--splash-color-1);
			
			> *
			{
				position: relative;
				z-index: 2;
				flex-basis: 100%;
			}
			
			span.icon .material-icons
			{
				font-size: 1.5rem;
			}
			
			h3
			{
				color: var(--splash-color-1);
				margin-bottom: 0px;
				margin-block-end: 0px;
			}
		}
		
		.portal-link:before
		{
			content: '';
			position: absolute;
			height: 100%;
			width: 100%;
			top: 0px;
			left: 0px;
			right: 0px;
			bottom: 0px;
			background: var(--splash-color-1);
			opacity: 0;
			border-radius: .5em;
		}
		
		div.portal-link
		{		
			span,
			h3
			{
				color: white;
			}
		}
		
		a.portal-link:hover:before
		{
			opacity: .08;
		}
		
		a.portal-link:focus:before
		{
			opacity: .1;
		}
		
		div.portal-link:before
		{
			opacity: 1;
		}
		
		aside
		{
			grid-column-start: 1;
			grid-column-end: 5;
			
			a
			{
				text-decoration: none;
				padding: .5em 1em;
				position: relative;
				display: inline-flex;
				gap: 1em;
				align-items: center;
				color: var(--splash-color-2);
				
				*
				{
					position: relative;
					z-index: 2;
				}
			}
			
			a:before
			{
				content: '';
				border-radius: 2em;
				position: absolute;
				top: 0px;
				bottom: 0px;
				left: 0px;
				right: 0px;
				height: 100%;
				width: 100%;
				background: var(--splash-color-2);
				opacity: 0;
				transition: all 250ms ease-in-out;
			}
			
			a:hover:before
			{
				opacity: .08;
			}
			
			a:focus:before
			{
				opacity: .1;
			}
		}
	}
}