/*
--------------------------------------
Container
--------------------------------------
*/

.case-studies-container {
	display: grid;
	grid-template-columns: 1fr;
	gap: calc(40px + (60 - 40) * ((100vw - 320px) / (1920 - 320))) calc(60px + (80 - 60) * ((100vw - 320px) / (1920 - 320)));
}

.project-page .case-study-item-container {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}


/*
--------------------------------------
Item
--------------------------------------
*/

/*Image*/

.case-study-link:hover {
	cursor: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MSIgaGVpZ2h0PSI4MSIgdmlld0JveD0iMCAwIDgxIDgxIj4KICA8ZyBpZD0iR3JvdXBlXzEyMjciIGRhdGEtbmFtZT0iR3JvdXBlIDEyMjciIHRyYW5zZm9ybT0idHJhbnNsYXRlKC04NDMtNjUxMS4wMDEpIj4KICAgIDxjaXJjbGUgaWQ9IkVsbGlwc2VfMyIgZGF0YS1uYW1lPSJFbGxpcHNlIDMiIGN4PSI0MC41IiBjeT0iNDAuNSIgcj0iNDAuNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODQzIDY1MTEuMDAxKSIgZmlsbD0iIzExMTIxNiIvPgogICAgPGxpbmUgaWQ9IkxpZ25lXzExIiBkYXRhLW5hbWU9IkxpZ25lIDExIiB4Mj0iMTciIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg3NS41IDY1NTEuNTAxKSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEiLz4KICAgIDxsaW5lIGlkPSJMaWduZV8xMiIgZGF0YS1uYW1lPSJMaWduZSAxMiIgeDI9IjE3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4ODMuNSA2NTQzLjUwMSkgcm90YXRlKDkwKSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEiLz4KICA8L2c+Cjwvc3ZnPgo='), auto;
}

.case-study-image-container .case-study-image {
	border-radius: 25px;
	object-fit: cover;
	height: calc(350px + (660 - 350) * ((100vw - 320px) / (1920 - 320)));
	width: 100%;
}

body:not(.home) .case-study-image-container .case-study-image {
	height: calc(350px + (610 - 350) * ((100vw - 320px) / (1920 - 320)));
	width: 410px;
}

/*Title*/

.case-study-title-container {
	padding-top: 1rem;
}

.case-study-title {
	font-size: var(--font-size-300);
	color: #fff;
}

.case-study-title:hover {
	color: var(--e-global-color-primary);
}

/*Tags*/

.tag-item {
	background-color: #E8EDF2;
	color: #fff;
}

/*
--------------------------------------
Spécifique à la home
--------------------------------------
*/

.home .case-studies-container {
	grid-template-columns: 1fr;
}

/*Image*/

.home .case-study-image-container .case-study-image {
	height: calc(540px + (660 - 540) * ((100vw - 320px) / (1920 - 320)));
}

/*Title*/

.home .case-study-title {
	color: var(--text-color);
}

/*Tags*/

.home .tag-item {
	color: var(--text-color);
}

/*
--------------------------------------
Spécifique à la page réalisations
--------------------------------------
*/

.project-page .tags-list .tag-item {
	background-color: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(5px);
}