/**
 * #Works
 */

.p-works {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 60px;
	padding: 120px 0 0;
	background: transparent;
	overflow: hidden;

	@media (max-width: 768px) {
		padding: 60px 0 0;
		gap: 30px;
	}

	.p-works__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		max-width: 1240px;
		padding: 0 20px;
		gap: 24px;

		@media (max-width: 768px) {
			justify-content: center;
		}

		.c-slider-nav {
			flex-shrink: 0;

			.c-slider-nav__btn {
				border: 0;
				background-color: var(--white);

				&::after {
					background-color: #111;
				}
			}

			@media (max-width: 768px) {
				display: none;
			}
		}
	}

	.p-works__title {
		margin: 0;
		padding-bottom: 13px;
		border-bottom: 10px solid var(--color-accent);
		font-size: 64px;
		font-weight: 900;
		line-height: 1;
		color: var(--white);
		text-shadow: 0 0 10px #fff;
		font-feature-settings: "palt";

		br {
			display: none;
		}

		@media (max-width: 768px) {
			padding-bottom: 5px;
			border-bottom-width: 5px;
			font-size: 40px;
			line-height: 1.3;
			text-align: center;

			br {
				display: block;
			}
		}
	}

	.p-works__empty {
		margin: 0;
		color: var(--white);
	}

	.p-works__slider {
		--works-gap: clamp(16px, calc(50 / 1440 * 100vw), 50px);
		width: 100%;
		padding-left: var(--works-gap);

		&.is-single {
			display: flex;
			justify-content: center;
			padding-left: 0;
		}

		@media (max-width: 768px) {
			display: flex;
			flex-direction: column;
			gap: 20px;
			padding: 0 20px;

			&.is-single {
				align-items: center;
			}
		}
	}

	.p-works__slide {
		display: flex;
		flex-direction: column;
		flex: 0 0 auto;
		gap: 21px;
		width: 420px;
		max-width: 420px;
		color: var(--white);
		text-decoration: none;

		@media (max-width: 768px) {
			width: 100%;
			max-width: 420px;
			gap: 15px;

			&:nth-child(n + 4) {
				display: none;
			}
		}

		&:hover {
			opacity: 1;
		}
	}

	.p-works__thumb {
		aspect-ratio: 420 / 281;
		overflow: hidden;
		border-radius: var(--front-rd-card, 10px);
		background-color: #e1e1e1;

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform 0.6s ease;
		}

		&.is-placeholder {
			display: flex;
			align-items: center;
			justify-content: center;

			img {
				width: 42%;
				height: auto;
				object-fit: contain;
				opacity: 0.3;
				mix-blend-mode: luminosity;
			}
		}
	}

	.p-works__slide:hover .p-works__thumb:not(.is-placeholder) img {
		transform: scale(1.03);
	}

	.p-works__name {
		margin: 0;
		font-size: 20px;
		font-weight: 700;
		line-height: 1.5;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		@media (max-width: 768px) {
			font-size: 16px;
		}
	}

	.p-works__meta {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		width: 100%;

		.c-card__cat {
			color: var(--white);
		}

		time {
			flex-shrink: 0;
			font-family: var(--ff-en);
			font-size: 17px;
			font-weight: 500;

			@media (max-width: 768px) {
				font-size: 14px;
			}
		}

		@media (max-width: 768px) {
			.c-card__cat {
				font-size: 12px;
				padding: 2px 10px;
			}
		}
	}
}