/* Desktop fix 220px */
.rl-tiles{
	display:grid;
	grid-template-columns:repeat(6,220px);
	gap:14px;
	justify-content:center;
	align-items:start;
}

.rl-tile{
	position:relative;
	width:220px;
	height:220px;
	overflow:hidden;
	border-radius:5px;
}

.rl-tile img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

/* Large Tablet */
@media (max-width: 1450px){
	.rl-tiles{grid-template-columns:repeat(4,220px)}
}

/* Tablet */
@media (max-width: 1000px){
	.rl-tiles{
		grid-template-columns:repeat(3,1fr);
		justify-content:stretch;
	}
	.rl-tile{
		width:100%;
		height:auto;
		aspect-ratio:1/1;
	}
}

/* Mobile -> 2 pro Zeile */
@media (max-width: 520px){
	.rl-tiles{
		grid-template-columns:repeat(2,1fr);
		gap:12px;
		justify-content:stretch;
	}
	.rl-tile{
		width:100%;
		height:auto;
		aspect-ratio:1/1;
	}
}

/* Product hover */
.rl-tile.rl-product .rl-overlay{
	position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
	background:rgba(0,0,0,0);color:#fff;text-align:center;padding:14px;
	opacity:0;transition:opacity .18s ease, background .18s ease;
	font-size:15px;line-height:1.2;font-weight:600;
}
.rl-tile.rl-product:hover .rl-overlay{opacity:1;background:rgba(0,0,0,.45)}

/* Category tiles */
.rl-tile.rl-category .rl-overlay{
	position:absolute;inset:0;
	display:flex;align-items:center;justify-content:flex-start;
	background:transparent;
	color:rgba(60, 60, 59, 1);
	font-family:"Brygada 1918", serif;
	font-size:50px;line-height:1.05;font-weight:500;
	text-align:left;white-space:pre-line;
	padding-left:18px;
}

/* Weiß für Body, Street und Music, Books */
.rl-cat-2 .rl-overlay,
.rl-cat-4 .rl-overlay{
	color:#fff !important;
}

.rl-tile a{display:block;width:100%;height:100%}

/* Kategorie-Symbole neben Site-Titel -> Mobile 2x2 (fix ab ~520px wie Artikelgrid) */
@media (max-width: 520px){
	/* 4 Symbole als 2x2, ohne "kleiner werden" */
	#ut-row-inner-69a461911b65a{
		display:flex !important;
		flex-wrap:wrap !important;
		gap:12px !important;
	}

	#ut-row-inner-69a461911b65a > .wpb_column {
		flex:0 0 calc(50% - 6px) !important;
		max-width:calc(50% - 6px) !important;
	}

	#ut-row-inner-69a461911b65a img {
		width:100px !important;
		height:100px !important;
		max-width:none !important;
	}
}