/** Bilderliste 
.imgList [medium, small, thumb]
*/
:root{
	--s1:130px;
	--s2:200px;
	--s3:500px;
}

.imgList{
	margin: 1em 0 1em 0;
    padding: .2em;
}
.imgList div.thumb{
    margin:0 0 .7em 0;
    display: block;
    height: var(--s1);
	background:var(--bg4);
	border: 1px solid var(--bg3);
}

.imgList a{
	text-decoration:none;
}

.img{
    width: 40%;
    height: 100%;
    background: var(--bg4);
	float:left;
}
.img div{
	align-items: center;
    justify-content: center;
    display: flex;
	height:100%
}
.img img{
	max-width: 100%;
    max-height: 100%;
}
.txt{
	height:100%;
	background:var(--bg1);
}
.txt div{
    width: 59%;
    height: 100%;
    align-items: center;
    display: flex;
    float: right;
    padding: 0 .3em;
}
.imgList,
.imgList div.thumb,
.txt div{
	box-sizing: border-box;
}

/** ------------------------- min 600 -------------------------------------------------------- */
@media (min-width: 600px){
	.imgList div.thumb {
		margin: 0 .3em .7em .3em;
		width: 48%;
		display: inline-block;
	}
	.imgList a{
		cursor:pointer;
	}
	.img{
		width:var(--s1);
	}
	.txt div{
		width:calc(100% - var(--s1));
		padding:0 1.5em;
	}
	
	.small .img{
		width:var(--s2);
	}
	.imgList.small div.thumb{
		height:var(--s2);
	}
	.imgList.small .txt div{
		width:calc(100% - var(--s2));
		padding:0 1em;
	}
	
	.imgList.medium div.thumb {
		margin: 0 .3em 3em .3em;
		width: 100%;
		display: block;
	}
	.medium .img{
		width:var(--s3);
	}
	.medium img{
		max-height:var(--s3);
	}
	.imgList.medium .img,
	.imgList.medium .img div,
	.imgList.medium .img img,
	.imgList.medium div.thumb{
		height:auto;
	}
	.imgList.medium .txt div{
		width:calc(100% - var(--s3));
		padding:0 1em;
	}
	.imgList.medium div.thumb{
		background:var(--bg1);
	}
	.imgList.medium .txt,
	.imgList.medium .txt div{
		height:100%;
	}
}