/**
 * CSS
 * @version 0.2
 * @author Ozhan Binici
 * last update: 2026.01.02
 * 
 */

.grid {
	display:flex;
	flex-wrap:wrap;
	width:100%;
	margin-top:-20rem;
	justify-content:center;
	align-items:baseline;
}

.overview .grid {
	order:2;
	width:calc(100% - 360rem);
	padding:0rem 20rem;
	justify-content:left;
	margin-top:-10rem;
	margin-top:auto;
	margin-bottom:auto;
}

#exhibition-works .grid {
	justify-content:left;
	padding-left:15rem;
	margin-top:0rem;
}




.grid-item {
	position:relative;
	display:block;
	height:auto;
	margin:0px;
}

.grid-item a {
	position:relative;
	display:block;
	margin:20rem;
	width:calc(100% - 40rem);
	height:auto;
	top:auto;
}

.grid .grid-item a.text {
	color: #000000;
	background-color: rgba(0, 0, 0, 0.05);
	padding: 15rem 20rem;
	transition-property: background-color;
	transition-duration: 0.2s;
	transition-timing-function: ease-out;
}

.grid .grid-item a.text:hover {
	background-color:rgba(0,0,0,0);
}

.grid-item.cover.width-1,
.grid-item.fit.width.width-1 {
	width:360rem;
}
.grid-item.width-2,
.grid-item.fit.width.width-2 {
	width:720rem;
}
.grid-item.width-3,
.grid-item.fit.width.width-3 {
	width:1080rem;
}
.grid-item.width-4,
.grid-item.fit.width.width-4 {
	width:1440rem;
}

.grid-item.width-full,
.grid-item.fit.width.width-full {
	width:100%;
}

.grid-item.fit.height {
	width:auto;
}

.grid-item.cover.height-1 picture,
.grid-item.fit.height.height-1 picture {
	height:106.67rem;
}

.grid-item.cover.height-2 picture,
.grid-item.fit.height.height-2 picture {
	height:160rem;
}
.grid-item.cover.height-3 picture,
.grid-item.fit.height.height-3 picture {
	height:213.33rem;
}
.grid-item.cover.height-4 picture,
.grid-item.fit.height.height-4 picture {
	height:320rem;
}
.grid-item.cover.height-5 picture,
.grid-item.fit.height.height-5 picture {
	height:426.67rem;
}
.grid-item.cover.height-6 picture,
.grid-item.fit.height.height-6 picture {
	height:480rem;
}
.grid-item.cover.height-7 picture,
.grid-item.fit.height.height-7 picture {
	height:533.33rem;
}
.grid-item.cover.height-8 picture,
.grid-item.fit.height.height-8 picture {
	height:640rem;
}

.grid-item picture {
	display:block;
	overflow:hidden;
	transition:all 0.5s ease;
}

.grid-item.cover picture,
.grid-item.fit.width picture {
	width:100%;
}

.grid-item.cover picture img {
	object-fit:cover;
	width:100%;
	height:100%;
}

.grid-item.fit.height picture {
	height:100%;
	width:auto;
}

.grid-item.fit.height picture img {
	object-fit:contain;
	height:100%;
	width:100%;
}


.grid-item a:hover picture {
	transform:scale(1.03);
	transition:all 0.5s ease;
}

.grid-item.width-2 a:hover picture,
.grid-item.width-3 a:hover picture {
	transform:scale(1.015);
}
/*




.grid .grid-item.width-1.height-1 figure {
	padding-top:26.65%;
	padding-top:calc(33.33% - 26.67rem);
}
.grid .grid-item.width-1.height-2 figure {
	padding-top:45%;
	padding-top:calc(50% - 20rem);
}
.grid .grid-item.width-1.height-3 figure {
	padding-top:63.35%;
	padding-top:calc(66.67% - 13.33rem);
}
.grid .grid-item.width-1.height-4 figure {
	padding-top:100%;
}
.grid .grid-item.width-1.height-5 figure {
	padding-top:136.8%;
	padding-top:calc(133.33% + 13.33rem);
}
.grid .grid-item.width-1.height-6 figure {
	padding-top:155%;
	padding-top:calc(150% + 20rem);
}
.grid .grid-item.width-1.height-7 figure {
	padding-top:173.35%;
	padding-top:calc(166.67% + 26.67rem);
}
.grid .grid-item.width-1.height-8 figure {
	padding-top:210%;
	padding-top:calc(200% + 40rem);
}

.grid .grid-item.width-2.height-1 figure {
	padding-top:12.7%;
}
.grid .grid-item.width-2.height-2 figure {
	padding-top:21.45%;
}
.grid .grid-item.width-2.height-3 figure {
	padding-top:30.15%;
}
.grid .grid-item.width-2.height-4 figure {
	padding-top:47.6%;
}
.grid .grid-item.width-2.height-5 figure {
	padding-top:65.1%;
}
.grid .grid-item.width-2.height-6 figure {
	padding-top:73.8%;
}
.grid .grid-item.width-2.height-7 figure {
	padding-top:82.55%;
}
.grid .grid-item.width-2.height-8 figure {
	padding-top:100%;
}

.grid .grid-item.width-3.height-1 figure {
	padding-top:8.35%;
}
.grid .grid-item.width-3.height-2 figure {
	padding-top:14.05%;
}
.grid .grid-item.width-3.height-3 figure {
	padding-top:19.8%;
}
.grid .grid-item.width-3.height-4 figure {
	padding-top:31.25%;
}
.grid .grid-item.width-3.height-5 figure {
	padding-top:42.7%;
}
.grid .grid-item.width-3.height-6 figure {
	padding-top:48.45%;
}
.grid .grid-item.width-3.height-7 figure {
	padding-top:54.15%;
}
.grid .grid-item.width-3.height-8 figure {
	padding-top:65.625%;
}

.grid .grid-item.width-4.height-1 figure {
	padding-top:6.2%;
}
.grid .grid-item.width-4.height-2 figure {
	padding-top:10.45%;
}
.grid .grid-item.width-4.height-3 figure {
	padding-top:14.75%;
}
.grid .grid-item.width-4.height-4 figure {
	padding-top:23.25%;
}
.grid .grid-item.width-4.height-5 figure {
	padding-top:31.8%;
}
.grid .grid-item.width-4.height-6 figure {
	padding-top:36.05%;
}
.grid .grid-item.width-4.height-7 figure {
	padding-top:40.3%;
}
.grid .grid-item.width-4.height-8 figure {
	padding-top:48.85%;
}

.grid .grid-item figure.fit {
	padding-top:0px !important;
}

.grid .grid-item:has(figure.fit){
	margin:0px;
}

.grid .grid-item figure {
	position:relative;
	display:block;
	width:100%;
	height:auto;
	overflow:hidden;
	
	transition:all 0.5s ease;
}

.grid .grid-item a:hover figure {
	transform:scale(1.03);
}

.grid .grid-item.width-2 a:hover figure {
	transform:scale(1.015);
}


.grid .grid-item figure img {
	position:relative;
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.grid .grid-item figure.fit img {
	position:relative;
	top:auto;
	left:auto;
}


.grid a figure.contain img,
.more-images.grid figure.contain img {
	object-fit:contain;
}





.grid .grid-item.fit.width-1,
.grid .grid-item.fit.width-2,
.grid .grid-item.fit.width-3,
.grid .grid-item.fit.width-4 {
	width:auto;
}

.grid .grid-item.fit.width.width-1,
.grid .grid-item.fit.width.width-2,
.grid .grid-item.fit.width.width-3,
.grid .grid-item.fit.width.width-4 {
	height:auto;
}


.grid .grid-item.height-1.fit figure {
	height:120rem;
}
.grid .grid-item.height-2.fit figure {
	height:180rem;
}
.grid .grid-item.height-3.fit figure {
	height:240rem;
}
.grid .grid-item.height-4.fit figure {
	height:360rem;
}
.grid .grid-item.height-5.fit figure {
	height:480rem;
}
.grid .grid-item.height-6.fit figure {
	height:540rem;
}
.grid .grid-item.height-7.fit figure {
	height:600rem;
}
.grid .grid-item.height-8.fit figure { {
	width:720rem;
}

.grid .grid-item.category-2 a {
	width:auto;
}

.grid .grid-item.category-2 figure {
	width:auto;
	height:auto;
}

.grid .grid-item.category-2 .figcaption {
	width:100%;
}




@media (max-width:1300px){
	.grid .grid-item.width-1 {
		width:360rem;
	}

	.grid .grid-item.width-2 {
		width:720rem;
	}

	.grid .grid-item.width-3,
	.grid .grid-item.width-4 {
		width:1080rem;
	}
}

@media (max-width:910px){
	.grid .grid-item.width-1 {
		width:360rem;
	}

	.grid .grid-item.width-2,
	.grid .grid-item.width-3,
	.grid .grid-item.width-4 {
		width:720rem;
	}
}

@media (max-width:520px){
	
	.grid .grid-item a {
		margin:10rem 10rem 20rem 10rem;
		width:calc(100% - 20rem);
	}
	.more-images .grid-item {
		padding:10rem;
	}
	
	.grid .grid-item.width-1,
	.grid .grid-item.width-2,
	.grid .grid-item.width-3,
	.grid .grid-item.width-4 {
		width:360rem;
	}
	
	.grid .grid-item.category-2.width-1,
	.grid .grid-item.category-2.width-2,
	.grid .grid-item.category-2.width-3,
	.grid .grid-item.category-2.width-4 {
		max-width:100%;
	}
	
	.grid .grid-item.category-2.width-1 a,
	.grid .grid-item.category-2.width-2 a,
	.grid .grid-item.category-2.width-3 a,
	.grid .grid-item.category-2.width-4 a {
		max-width:calc(100% - 20rem);
	}
	
}
*/


.grid-item a figcaption {
	position:relative;
	display:block;
	font-size:18rem;
	line-height:24rem;
	color:#000000;
	padding:0px;
	margin-top:7rem;
	/*
	z-index:9;
	pointer-events: none;
	max-width:none;
	*/
	text-align:center;
}

/*
.grid .grid-item {
	background-color:#FFFFFF;
	transition-property: background-color;
	transition-duration: 0.2s;
	transition-timing-function: ease-out;
}
.grid .grid-item:hover {
	background-color:#FFCC00;
}
.grid-item a:hover picture,
.grid-item.width-2 a:hover picture,
.grid-item.width-3 a:hover picture {
	transform:none;
}
*/


.grid a:hover figcaption {
	text-decoration:underline;
	text-decoration-thickness: 1rem;
	text-underline-offset: 1.5rem;
}


.grid a .figcaption,
.grid.more-images .figcaption {
	position:relative;
	display:block;
	font-size:15rem;
	line-height:22rem;
	color:#000000;
	padding:0px;
	margin-top:7rem;
	z-index:9;
		
	pointer-events: none;
	max-width:none;
	
	
	text-align:center;
}

.grid.more-images .figcaption {
	text-align:left;
}

.grid a .figcaption .title,
.grid.more-images .figcaption .title {
	font-size:18rem;
	line-height:24rem;
}

.grid a .figcaption span.english,
.grid.more-images .figcaption span.english {
	display:inline;
	opacity:0.5;
}
.grid a:hover .figcaption {
	text-decoration:underline;
	text-decoration-thickness: 1rem;
	text-underline-offset: 1.5rem;
}

.grid a .figcaption h3 {
	font-weight:600;
}


.more-images {
	display:flex;
	flex-wrap:wrap;
	width:calc(100% - 720rem);
	width:100%;
	margin:0rem 0rem 30rem 0rem;
	flex-shrink:1;
}

.more-images .grid-item {
	padding:20rem;
}
.more-images figure {
	width:100%;
	height:auto;
	cursor:zoom-in;
}

.more-images figure img {
	width:100%;
	height:auto;
	display:block;
}

.overview .grid-item,
#exhibition-works .grid-item {
	width:auto;
}

.overview .grid-item a,
#exhibition-works .grid-item a {
	margin:10rem;
}

@media (max-width:520px){
	.grid-item.width-2, 
	.grid-item.fit.width.width-2 {
		width:100%;
	}
}

@media only screen and (orientation : portrait) {
	.grid-item.cover.width-1, 
	.grid-item.fit.width.width-1,
	.grid-item.cover.width-2, 
	.grid-item.fit.width.width-2,
	.grid-item.cover.width-3, 
	.grid-item.fit.width.width-3 {
		width:380rem;
	}
	
	.grid-item.cover.width-2.height-1 picture,
	.grid-item.fit.height.height-1 picture {
		height:53.33rem;
	}
	.grid-item.cover.width-2.height-2 picture,
	.grid-item.fit.height.height-2 picture {
		height:80rem;
	}
	.grid-item.cover.width-2.height-3 picture,
	.grid-item.fit.height.height-3 picture {
		height:106.67rem;
	}
	.grid-item.cover.width-2.height-4 picture,
	.grid-item.fit.height.height-4 picture {
		height:160rem;
	}
	.grid-item.cover.width-2.height-5 picture,
	.grid-item.fit.height.height-5 picture {
		height:213.34rem;
	}
	.grid-item.cover.width-2.height-6 picture,
	.grid-item.fit.height.height-6 picture {
		height:240rem;
	}
	.grid-item.cover.width-2.height-7 picture,
	.grid-item.fit.height.height-7 picture {
		height:266.67rem;
	}
	.grid-item.cover.width-2.height-8 picture,
	.grid-item.fit.height.height-8 picture {
		height:320rem;
	}
	
	
	.grid-item.fit.height {
		width:380rem;
	}
	
	.grid-item.fit.height figure {
		width:100% !important;
	}
	
	.grid-item.fit.height picture {
		height:100% !important;
	}
	
	.overview .grid-item a {
		width:calc(100% - 20rem) !important;
	}
	
	.grid-item a.text {
		width:calc(100% - 20rem);
		margin-bottom:0rem;
	}
	
	.column.sticky {
		height:auto;
		top:auto;
		position:relative;
	}
	
	.column.width-4 {
		width:100%;
		margin:20rem 0rem;
	}
	.column.width-2 {
		width:100%;
	}
	
	.columns .column .cell {
		margin-bottom:0rem;
	}
	
	.columns {
		margin-bottom:30rem;
	}
}