:root{
	--bc1:#eaeef1;
	--bc2:rgb(56 58 59 / 59%);
	--c1:150px;
	--c2:250px;	
}
[data-headimg]{
	max-width: 1400px;
    margin: 0 auto;
    padding: 0 .5em;
}
#ssgal.fullw img{
	width:100%;
}
#cols{
	display: flex;
}
.content #cols{
	margin:0 auto;
	max-width:var(--maxw);
}
.si a{
	text-decoration:none;
}
.thumbs{
    width: 90vw;
    display: block;
    margin: 0 auto 2em auto;
    max-width: calc((var(--c1) + 1em) *7);
}
.thumbs.medium{
	max-width: calc((var(--c2) + 1em) *5);
}
.fullw .si{
    max-width:100%;
    margin: .5em;
}
.thumbs .si{
	margin:0 0 .5em 0;
}

.col{
	margin:0 auto;
}
/** 2 Spaltig */
[data-cnt="2"] .col{
	margin:0 0 0 auto;
}
[data-cnt="2"] .col:nth-child(2){
	margin:0 auto 0 0;
}
.col,
.thumbs .si,
.thumbs .si span,
.thumbs.medium .si span{
	display: inline-block;
}
#ssgal,
.thumbs .si span{
	box-sizing: border-box;
}
/** ------------------------- min 600 -------------------------------------------------------- */
@media (min-width: 600px){
	.thumbs .si div{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}
	.thumbs .si{
		margin:.1em;
	}
	.thumbs.medium .si{
		width: var(--c2);
		height:var(--c2);
	}
	.thumbs .si img{
		width:100%;
	}
	.thumbs .si img[data-o="p"]{
		height: 100%;
		width: auto;
	}
	.thumbs.medium .si p{
		width: var(--c2);
		margin-top:10em;
	}
	.thumbs .si span{
		width: var(--c1);
		background: rgb(0 0 0 / 46%);
		color: #fff;
		padding: 0.7em;
		line-height: 1.4em;
		font-size: .9em;
	}
	.thumbs .si p{
		animation: fadein 500ms;
		-webkit-transition: opacity 500ms ease-out;
		-ms-transition: opacity 500ms ease-out;
		transition: opacity 500ms ease-out;
		opacity:0;
		position:absolute;
		margin: -0.3em 0 0 0;
		width: var(--c1);
		text-align: left;
	}
	.thumbs.medium .si p{
		width: var(--c2);
		margin-top:10em;
	}
	.thumbs.medium .si span{
		width: var(--c2);
		font-size: 1em;
	}
	.thumbs .si:hover p{
		opacity:1;
	}
}
/** ------------------------- min 800 -------------------------------------------------------- */
@media (min-width: 600px){
	.thumbs .si{
		width: var(--c1);
		height:var(--c1);
		background:var(--bc1);
		float: left;
		margin:.5em;
	}
	.thumbs.medium .si{
		width: var(--c2);
		height:var(--c2);
	}
}
@media (min-width: 800px){
	[data-headimg]{
		padding: 0 1em;
	}
	.fullw .si{
		margin: 1em;
	}
}
/** ------------------------- min 900 -------------------------------------------------------- */
@media (min-width: 900px){
	[data-headimg]{
		padding: 0 2em;
	}
}