.head {
	background-color:#000;
	padding-inline:var(--global_inline_padding);
	padding-block:25vh var(--global_inline_padding);

	& h1 {
		margin:0;
	}

	& p {
		margin-bottom:0.5rem;
	}
}

.details {
	display:grid;
	grid-template-columns: 1fr 1fr;
	align-items:start;

	& .main-img {
	

	}

	& .images {
		position:sticky;
		top:77px;

	}

	.other-imgs {
		display:grid;
		grid-template-columns: repeat(3,1fr);
	}


	& .text {
		background-color:#fff;
		color:#000;
		padding:var(--global_padding);

		& h2 {
			margin-top:1lh;
			margin-bottom:0.75lh;
		}
	}
}

.stats {
	margin-bottom:4rem;
}

.stat {
	display:grid;
	grid-template-columns:200px 1fr;
	gap:1rem;
	padding-bottom: 1rem;
	border-bottom:1px solid #ddd;
	margin-bottom:1rem;

	&:last-of-type {
		border-bottom:none;
	}

	& p {
		margin:0;
	}
}

.tags {
	display:flex;
	flex-wrap: wrap;
	align-items:start;
	gap:0.35rem;
	& p{
		background-color:#000;
		font-size:0.8rem;
		padding:0.25rem;
		line-height:1;
		color:#fff;
	}
}

.all-case-studies {
	display:grid;
	grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
	padding:var(--global_padding);
	gap:2rem;

    & .bg {
        position:absolute;
        opacity:0.3;
        right:0;
        bottom:0;
        height:100%;
        max-height:100vh;
        width:25%;
        background-image:url('../img/triangles-white-outline2.svg');
        background-size: cover;
        background-position: left center;
        background-repeat: no-repeat;
    }

    & > .text {
        padding-inline:var(--global_inline_padding);
        text-align: center;
        margin-bottom:3rem;
        color:#fff;

        & > p {
            max-inline-size:75ch;
            margin-inline:auto;
            text-wrap:balance;
        }
    }
 
	& a {
		text-decoration: none;

		&:hover {
			& .image {
				filter:saturate(1);
			}
			& .text {
				background-color:#fff;
				color:#000;
				&::after {
					filter:invert();
				}
			}
		}

	}

	& .image {
		filter:saturate(0);
		transition:filter 0.75s;
	}

	& .text {
		position:relative;
		width:100%;
		padding:1rem;
		padding-right:3rem;
		background-color:#1a1a1a;

		& h3 {
			font-weight: 600;
		}

		& .value {
			font-weight: 600;
		}

		&::after {
			content:url('../img/triangle-right-white.svg');
			position:absolute;
			right:0;
			bottom:0;
			width:1.5rem;
		}
	}
}

@media screen and (max-width:900px){
	.details {
		grid-template-columns: 1fr;

		& .images {
			position:static;
		}
	}
}

@media screen and (max-width:500px){
	.stat {
		grid-template-columns: 140px 1fr;
	}
}