.slider {
	width: 100%;
	overflow: hidden;
	.slides {
		display: flex;
		margin-bottom: 5px;
		gap: 20px;
	}
	.controls {
		display: grid;
		grid-template-columns: 50px auto 50px;
		justify-content: space-between;
		max-width: 100%;
		a {
			grid-column: 2;
			padding-inline: 50px;
		}
		.white-btn,
		.red-btn {
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.arrow-l,
		.arrow-r {
			display: none;
			.text-h b {
				&::after {
					content: '\e905';
					font: 100 20px / 1 icon;
				}
			}
			&.ws-arrow-disabled {
				opacity: .6;
				pointer-events: none;
			}
		}
		.arrow-r {
			grid-column: 3;
			.text-h b::after {
				content: '\e904';
			}
		}
		.white-btn {
			--btn-color: var(--2);
			border-color: var(--btn-color);
			&::before {
				background: var(--btn-color);
			}
			.text-h b:first-child {
				color: var(--btn-color);
			}
		}
		&:has(.arrow-l.ws-arrow-disabled ~ .arrow-r.ws-arrow-disabled) {
			.arrow-l,
			.arrow-r {
				display: none;
			}
		}
	}
	&:has(.slide + .slide) .controls :is(.arrow-l, .arrow-r) {
		display: flex;
	}
}
.page-content {
	position: relative;
	width: 100%;
	section {
		.slide {
			flex: 0 0 calc((100% - 40px) /3);
            display: grid;
            flex-direction: column;
            gap: 20px;
            grid-template-columns: 1fr;
            grid-template-rows: 1fr;
			gap: 20px;
			.box {
				position: relative;
				display: flex;
				flex-direction: column;
				overflow: hidden;
				padding: 17px 20px;
				border: 1px solid rgba(168, 168, 168, 0.2);
				transition: border-color var(--tz);
				background: hsl(0, 0%, 100%);
			}
			.content {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				line-clamp: 2;
				-webkit-line-clamp: 2;
				overflow: hidden;
				font-weight: 300;
				line-height: 1.4;
				letter-spacing: 0.32px;
				* {
					display: contents;
					font-size: inherit;
					font-weight: inherit;
					color: inherit;
					letter-spacing: inherit;
				}
			}
			.arrow {
				width: 32px;
				height: 32px;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: auto;
				margin-top: auto;
				color: var(--2);
				background: none;
				border: none;
				&::before {
					content: '\e90e';
					font: 600 24px/1 icon;
				}
			}
			.link {
				position: absolute;
				inset: 0;
				z-index: 2;
			}
			.name {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				line-clamp: 3;
				-webkit-line-clamp: 3;
				overflow: hidden;
				font-size: 20px;
				font-weight: 500;
				line-height: 1.4;
				letter-spacing: 0.32px;
				margin-bottom: 4px;
			}
		}
		.controls {
			max-width: calc((200% - 40px) / 3);
		}
		.under-line {
			font-size: 24px;
			color: var(--2);
			line-height: 28px;
			&::after {
				background: var(--2);
			}
		}
	}
	.projects .slide .img {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: var(--white);
		transition: opacity var(--tz), transform var(--tz);
		img {
			pointer-events: none;
			width: auto;
			max-width: 150px;
		}
		.logo {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 100%;
			align-self: normal;
			margin: 20px;
			text-align: center;
			text-wrap: balance;
			color: var(--2);
			text-shadow: 0 24px 10px rgba(0, 0, 0, 0.01), 0 13px 8px rgba(0, 0, 0, 0.05), 0 6px 6px rgba(0, 0, 0, 0.09), 0 1px 3px rgba(0, 0, 0, 0.1);
			font-size: 18px;
			font-weight: 1000;
			line-height: 1;
			letter-spacing: 0.048px;
			text-transform: uppercase;
			background: url(../images/projects/angle1.webp) left top / auto no-repeat,
				url(../images/projects/angle2.webp) right bottom / auto no-repeat,
				url(../images/projects/lines.svg) center center;
		}
	}
	.our-help {
		.slide .box {
			background: var(--white);
			.name {
				position: absolute;
				z-index: 1;
				inset: 0;
				background: var(--white);
				padding: inherit;
				font-size: 18px;
				transition: opacity var(--tz);
			}
			.content {
				transform: translateY(100%);
				transition: transform var(--tz), opacity var(--tz);
				line-clamp: 5;
				-webkit-line-clamp: 5;
				opacity: 0;
			}
		}
	}
	.events .slide {
		border: 1px solid var(--ee);
		padding-bottom: 20px;
		gap: 0;
		align-items: flex-start;
		overflow: hidden;
		img {
			max-width: 100%;
			margin-bottom: 20px;
			object-fit: cover;
		}
		.name {
			transition: color var(--tz);
			line-height: 100%;
			width: 100%;
		}
		.content {
			margin-block: 4px 17px;
			line-clamp: 3;
			-webkit-line-clamp: 3;
			* {
				line-height: 19px;
			}
		}
		>*:not(img) {
			max-width: 100%;
			padding: 0 20px;
		}
		strong {
			padding: 0;
		}
		div:has(.arrow) {
			display: flex;
			align-items: end;
			justify-content: space-between;
			width: 100%;
			margin-top: auto;
			span {
				font-size: 12px;
				font-weight: 300;
				letter-spacing: 0.2px;
			}
			.arrow {
				width: initial;
				height: initial;
				aspect-ratio: 1;
				color: var(--text);
			}
		}
		>a {
			width: 100%;
		}
	}
}
@media screen and (max-width: 1279px) {
	.bg-box .bg {
		height: 140%;
	}
	.page-content {
		.our-help {
			.slider {
				.white-btn:not(.arrow-r, .arrow-l) {
					text-align: center;
					padding-inline: 50px 30px;
				}
			}
			.slide .box {
				background: var(--white);
				padding: 20px;
				.name {
					position: static;
					padding: 0;
					margin-bottom: 10px;
					opacity: 1 !important;
				}
				.content {
					line-clamp: 4;
					-webkit-line-clamp: 4;
					opacity: 1;
					transform: none;
					transition: transform var(--tz), opacity var(--tz);
					* {
						letter-spacing: 1;
					}
				}
			}
		}
	}
}
@media screen and (max-width: 767px) {
	.page-content section .slide {
		flex: 1 0 100%;
	}
}
@media (hover:hover) {
	.page-content section {
		.slide .box:hover {
			border-color: var(--2);
			.img {
				opacity: 0;
				transform: translateY(-100%);
				pointer-events: none;
				&::after {
					opacity: 1;
				}
			}
		}
		&.our-help .slide .box:hover {
			.name {
				opacity: 0;
				pointer-events: none;
			}
			.content {
				opacity: 1;
				transform: translateY(0);
			}
		}
		&.events .slide:hover {
			.name,
			.arrow {
				color: var(--2);
			}
		}
	}
}