.case-study-carousel {
	overflow: hidden;
}

.case-study-carousel .carousel .case-study {
	animation-play-state: paused;
	animation-name: fadeInDown;
	animation-timing-function: ease;
	animation-fill-mode: backwards;
}

.case-study-carousel .carousel.animating .case-study {
	animation-play-state: running;
}

.case-study-carousel .case-study {
	position: relative;
	width: 320px;
	height: 320px;
	margin-right: 16px;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: center;
}

.case-study-carousel .case-study .image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.case-study-carousel .case-study .overlay {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: center;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color-grey-6);
	opacity: 0;
	transition: opacity 0.3s ease;
}
.case-study-carousel .case-study:hover::after,
.case-study-carousel .case-study:focus::after,
.case-study-carousel .case-study:focus-visible::after{
  display:none  
}
.case-study-carousel .case-study:hover .overlay,
.case-study-carousel .case-study:focus .overlay,
.case-study-carousel .case-study:focus-visible .overlay {
	opacity: 0.8;
}

.case-study-carousel .case-study .overlay .overlay-text {
	color: var(--color-secondary-light);
	font-size: 14px;
	line-height: 1.25;
	text-transform: uppercase;
	letter-spacing: 1.5px;
}

.case-study-carousel .case-study .title {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 16px;
	color: var(--color-text-white-light);
	transition: color 0.3s ease;
  z-index:1000;
}

.case-study-carousel .case-study:hover .title,
.case-study-carousel .case-study:focus .title,
.case-study-carousel .case-study:focus-visible .title {
	color: var(--color-grey-0);
}

.case-study-carousel .navigation {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	margin: 42px auto 0;
	width: 100%;
	max-width: max(var(--container-width));
	padding: 0 var(--content-padding);
	box-sizing: content-box;
}

.case-study-carousel .navigation .arrow {
	display: flex;
	padding: 10px;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: 50%;
	transition: border 0.3s ease;
}

.case-study-carousel .navigation .arrow:hover {
	border: 1px solid var(--color-icon-accent);
}

.case-study-carousel .navigation .arrow-right {
	margin-left: 20px;
}

.case-study-carousel .navigation .arrow svg {
	fill: var(--color-icon-accent);
}

.case-study-carousel .flickity-slider {
	margin-left: max(calc((100% - var(--container-width)) / 2), var(--content-padding));

.case-study::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: lightgrey;
    mix-blend-mode: multiply; /* Or choose an appropriate blend mode */
    pointer-events: none; /* Ensure it doesn't block interaction with elements */
    z-index: 1; /* Place it behind other content */
}