.werk-section .col-2 {
	margin-bottom: 0;
}

.img-wrapper {
	position: relative;
	aspect-ratio: 4/5;
	overflow:hidden;
}

.img-wrapper img {
	display:block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	max-width: none;
}

.img-wrapper img.portrait {
	width: 100%;
	height: auto;
}

.img-wrapper img.landscape {
	height: 100%;
	width: auto;
}


.werk-overview {
	display:flex;
	flex-direction: column;
	gap: 1.6rem;
}

.werk-preview a {
	display:block;
	text-decoration: none;
}

.werk-preview .img-wrapper {
	margin-bottom: 0.4rem;
}


/* swiper */

.swiper {
	position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: white;
	pointer-events:none;
	transform: translate(-100vw,0);
	transition: transform 0.5s var(--ease);
}

.swiper.open {
	pointer-events: auto;
	transform: translate(0,0);
}

.swiper-button-prev:after,
.swiper-button-next:after {
	display:none;
}

.swiper-button-next svg {
	transform: rotate(180deg);
	transform-origin: center;
}

.swiper-closer,
.swiper-closer:hover,
.swiper-closer:active {
	background: transparent;
	border: none;
}

/*
.swiper-nav svg path {
	stroke-width: 0.8vw !important;
}
*/

.swiper-slide img {
	margin: 12vh auto 0 auto;
	max-width: calc(100% - 8vw);
	height: auto;
	width: auto;
}


.slide-caption {
	max-width: calc(100% - 8vw);
	margin: 0.7rem auto;
	white-space: pre-line;
}


/* mobile only */
@media only screen and (max-width: 800px) {

	.swiper-nav {
		position: absolute;
		z-index: 11;
		bottom: 0;
		left: 0;
		height: 17vw;
		width: 100%;
		background-color: white;
	}

	.swiper-closer {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: auto;
		height: 100%;
		aspect-ratio: 1/1;
	}

	.swiper-closer svg {
		width: 1.3rem;
	}

	.swiper-button {
		width: 12vw;
		height: 100%;
		padding: 4vw;
		top: 0;
		margin: 0;
		-webkit-tap-highlight-color: transparent;
	}

	.swiper-button-next {
		right: 0;
	}

	.swiper-button-prev {
		left: 0;
	}

	.swiper-button svg {
		display:block;
		width: 100%;
		height: auto;
	}


}


/* small/short mobile & tablets */
@media (min-aspect-ratio: 5/9) {
	.swiper-slide img {
		margin-top: 4vw;
		max-height: 70vh;
	}
	
}

/* medium/short mobile 
@media only screen and (max-height: 850px) {
	.swiper-slide img {
		margin-top: 8vh;
	}
}
*/

/* tablet + desktop */
@media only screen and (min-width: 800px) {
	
	.werk-overview {
		flex-direction: row;
		flex-wrap:wrap;
		justify-content: space-between;
		gap: 0;
	}
	
	.werk-overview .werk-preview {
		flex-basis: 48.2%;
		cursor: pointer;
	}
	
	.werk-overview .werk-preview .img-title {
		padding-bottom: 1.6em;
	}
	
	.werk-overview .werk-preview:hover .img-title {
		text-decoration: underline;
		text-decoration-thickness: 0.11em;
		text-underline-offset: 0.24em;
	}
	
	.werk-section .columns .col-2 {
		flex-basis: 65.9%;
	}
	
	
	/* swiper */
	
	.swiper {
		transform: translate(0,-100vh);
	}
	
	.swiper-closer {
		position: absolute;
		z-index: 2;
		top: 2vw;
		right: 4vw;
		padding: 0;
		width: 1.5vw;
	}
	
	.swiper-closer svg {
		padding: 1vw;
	}
	/*
	.swiper-button svg path {
		stroke-width: 0.2rem !important;
	}
	
	.swiper-closer svg path {
		stroke-width: 0.17rem !important;
	}
	*/
	.swiper-button {
		width: 3.2rem;
		height: auto;
		padding: 1.2rem;
		top: 50%;
		margin-top: -2rem;
	}
	
	.swiper-button svg {
		padding: 0;
	}
	
	.swiper-button-prev {
		left: 1rem;
	}
	
	.swiper-button-next {
		right: 1rem;
	}
	
	.slide-caption {
		position: absolute;
		bottom: 0;
		left: 0;
		width: auto;
		max-width: none;
		background-color: rgba(255,255,255,0.8);
		padding: 1.2rem 2rem;
	}
	
	.swiper-slide {
		display:flex;
		align-items: center;
		justify-content: center;
	}
	
	.swiper-slide img {
		max-width: 85vw;
		max-height: 74vh;
		margin: 0 0 5vh 0;
	}

	
}



/* desktop + */
@media only screen and (min-width: 1300px) {
	
}

/* desktop +++ */
@media only screen and (min-width: 3840px) {
	/* hack for strechted images in chrome fullscreen */
	.swiper-slide img {
		max-width: none;
		height: 70vh;
	}
}