.artists{
	container-name: artistsContainer;
	container-type: inline-size;
	padding:4vh 30px 1vh 30px;
	/* SUCHCONTAINER VARS 
	--bottomGap: .5vh;	
	*/
}

.artists .genre_name {
	display:none;
}
.artists .feturedHeader {
	margin-bottom:5vh;
}
.artistList{
	display: grid;
	column-gap: 1rem;
	margin-top:1vh;
	margin-bottom:1vh;
}
.artists.artists_page .layerButton {
	display:none;
}
.artistList a {
	text-decoration: none;
	margin-bottom: var(--bottomGap);
	padding: var(--bottomGap) 0;
}
.artistList a .artistElement{
	display: flex;
	_margin-bottom:.5vh;
	position: relative;
}

.artistElement:hover .artistElementImage img {
	scale: 1.2;
}
.artistList a .artistElement .artistElementImage{
	border-radius: 100em;
	overflow: hidden;
	min-width:80px;
	height:auto;
	aspect-ratio:1/1;
	_margin-bottom: var(--bottomGap);
}
.artistList a .artistElement .artistElementImage img{
	width:100%;
	-width:100px;
}
.artistList a .artistElement .artistElementContent{
	text-transform:uppercase;
	font-family: 'Montserrat', sans-serif;
	font-weight:700;
	_font-size: var(--titel-size);	
	_font-size: var(--image_sub_text);
	line-height:1.2em;

}

.artistList a img {
	transition: all .5s ease-in-out;
}
.artistList a:hover img {
	transform: scaleX(1.2) scaleY(1.2);
}
.artistList a:hover .artistElementContent {
	color: var(--semmel-red);
}

.artistList .artistElement .artistElementImage {
	
}
.artistList .artistElement .artistElementContent{
	font-size: var(--image_sub_text);
	
	/*
	word-wrap: break-word;
	word-break: break-all;
	*/
	
	font-weight:600;
	text-transform:uppercase;
	text-align:center;
	line-height:1.1em;
	margin-bottom:1vh;
}
.artistList .artistElement .artistElementContent .contentText
{
	font-size: calc(var(--fliesstext-size)*1);
	line-height:1.1em;
	margin:0;
	padding:0;
	text-align:center;
	font-weight:400;
	text-decoration: none;
	text-transform: none;
}
@container artistsContainer ( min-width: 140px ) {
	.artistList{
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		column-gap: 1vw;
	}
	
	.artistList a {
		margin:0;
		padding:0;
		gap:0;
	}
	.artistList a .artistElement {
		
		display: flex;
		flex-direction: row;
		gap: 1rem;
		margin-bottom:2vh;
		padding-bottom:2vh;
		border-bottom:1px solid #000;5
	}	
	.artistList a .artistElement .artistElementImage {
		max-width:60px;
		_min-width: 100px;
		_display: none;
	}
	.artistList a .artistElement .artistElementContent {
		align-content: center;
		text-align: left;
		f__ont-size: var(--image_sub_text);

	}
	.artistList a:hover {
		_background-color:#eee;
	} 
	.artistList .artistElement .artistElementContent .contentTitel_name{
		text-align:left;
	}
	.artistList .artistElement .artistElementContent .contentText{
		text-align:left;
	}
	
	
}
@container artistsContainer ( min-width: 500px ) {
	.artistList{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: 1vw;
	}
	.artistList a .artistElement {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		margin-bottom:2vh;
		border:0px;
	}	
	
	.artistList a .artistElement .artistElementContent{
		display: flex;
		flex-direction: column;
		gap: 0rem;
		margin-bottom:2vh;
		border:0px;
		text-align:center;
	}	
	
	.artistList a .artistElement .artistElementImage {
		border-radius: 100em;
		display:flex;
		overflow: hidden;
		min-width: 80px;
		height: auto;
		aspect-ratio: 1 / 1;
	}
	.artistList a .artistElement .artistElementImage {
		width: 75%;
		max-width: none;
		margin-right: auto;
		margin-left: auto;

	}
	.artistList a .artistElement .artistElementContent .contentTitel_name,
	.artistList a .artistElement .artistElementContent .contentText{
		text-align:center;
		line-height:1.1em;
		margin:0;
		padding:0;
	}
	.artistList a .artistElement .artistElementContent .contentTitel_name {
		_font-size: calc(var(--titel-size)*0.95);
		/*
		word-wrap: break-word;
		word-break: break-all;
		*/
		font-weight:600;
		text-transform:uppercase;
		text-align:center;
		line-height:1.1em;
		margin-bottom:1vh;
	}
	.artistElement {
		margin-left: 0%;
		margin-right: 0%;
	}

}

@container artistsContainer ( min-width: 540px ) {
	.artistList{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		column-gap: 1vw;
	}
	.artistElement {
		margin-left: 0%;
		margin-right: 0%;
	}

}
@container artistsContainer ( min-width: 740px ) {
	.artistList{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		column-gap: 1vw;
	}
	.artistElement {
		margin-left: 10%;
		margin-right: 10%;
	}
}
@container artistsContainer ( min-width: 1200px ) {
	.artistList{
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		column-gap: 1vw;
	}
	.artistElement {
		margin-left: 0%;
		margin-right: 0%;
	}

}