/*.kacheln{
	display: grid;
	grid-template-columns: repeat(3, 1fr);

	border-bottom: 1px solid #444444;

	&>*{
		grid-row: span 2;
		display: grid;
		grid-template-rows: subgrid;
		border-right: 1px solid #444444;
		border-top: 1px solid #444444;
		border-bottom: 1px solid #444444;
		margin-bottom: -1px;

		&:nth-child(3n){
			border-right: none;
		}

		img{
			width: 100%;
			aspect-ratio: 1/1;
			height: auto;
			object-fit: cover;
			grid-row: 1;
			filter: grayscale(100%);
			transition: filter 1s ease;
		}
		
		&:hover img{
			filter: grayscale(0%);
		}

		span{
			grid-row: 2;
		}
	}
}
*/

.kachel{


	text-decoration: none;

	figure{
		img{
			width: 100%;
			filter: grayscale(100%);
			transition: var(--maintrans);
		}
	}

	span{
		padding: 0 var(--wp--preset--spacing--mainpadding) 2.5rem;
		text-align: center;
		display: block;
		font-size: var(--wp--preset--font-size--large);

		 &::after{
			content: '→';
			position: relative;
			transition: var(--maintrans);
			padding: .25em;
            font-size: 1.5rem;

			display: inline-flex;
            box-sizing: border-box;
            align-items: center;
            justify-content: center;

			top: -.25rem;

			aspect-ratio: 1 / 1;
			width: 3.5rem;
			
			border: var(--wp--custom--main-border);
			border-color: var(--font-color);
			border-radius: 5rem;
			margin-left: .5rem;
		}
	}

	&:hover{

		figure{
			img{
				filter: grayscale(0%);
			}
		}

		span{
			&::after{
				background-color: var(--font-color);
				color: var(--background-color);
				margin-left: 1.5rem;
			}
		}
	}

	&:not(:has(figure)){
		span{
			padding: 2.5rem var(--wp--preset--spacing--mainpadding) 2.5rem;
		}
	}
}