@use "../utilities" as *;

/* START: H6 Projects CSS */
.h6-project {
	&-section {
		overflow: hidden;
	}
	&-wrap {
		.pin-spacer {
			&:nth-child(even) {
				.h6-project-item {
					flex-direction: row-reverse;
					@media #{$md, $sm, $xs} {
						flex-direction: column-reverse;
					}
				}
			}
		}
	}
	&-item {
		background-color: var(--tj-color-theme-dark);
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		position: relative;
		z-index: 2;
		&:not(:last-child) {
			margin-bottom: 30px;
		}

		&:nth-child(even) {
			flex-direction: row-reverse;
		}

		.project_image {
			max-width: calc(50% - 0px);
			max-height: 550px;
			width: 100%;
			overflow: hidden;
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		.project_content {
			max-width: calc(50% - 0px);
			width: 100%;
			padding: 30px;
			display: inline-flex;
			align-items: center;
			justify-content: center;

			&_inner {
				max-width: 440px;
				width: 100%;
				.no {
					display: inline-flex;
					font-family: var(--tj-ff-heading);
					font-weight: var(--tj-fw-sbold);
					font-size: 88px;
					line-height: 1;
					letter-spacing: -0.025em;
					color: rgba(247, 247, 247, 0.1);
					margin-bottom: 10px;
				}
				.title {
					margin: 0;
					color: var(--tj-color-common-white);

					a {
						&:hover {
							color: var(--tj-color-theme-primary);
						}
					}
				}
				.desc {
					color: var(--tj-color-common-white-2);
					margin-top: 15px;
				}
				.project_btn {
					background: linear-gradient(to right, #f75763, #c354af, #9353f5);
					margin-top: 25px;
				}
			}
		}
	}

	@media #{$xl} {
		&-item {
			.project_content {
				&_inner {
					max-width: 395px;
				}
			}
		}
	}
	@media #{$lg} {
		&-item {
			.project_content {
				&_inner {
					max-width: 395px;

					.no {
						font-size: 75px;
						margin-bottom: 15px;
					}
				}
			}
		}
	}
	@media #{$md, $sm, $xs} {
		&-item {
			flex-direction: column-reverse;

			&:nth-child(even) {
				flex-direction: column-reverse;
			}
			.project_image {
				max-width: 100%;
				max-height: 420px;
			}
			.project_content {
				max-width: 100%;
				min-height: 420px;
				padding: 35px 30px 40px;

				&_inner {
					max-width: 100%;

					.no {
						font-size: 75px;
						margin-bottom: 15px;
					}
				}
			}
		}
	}
	@media #{$sm} {
		&-item {
			.project_image {
				max-height: 420px;
			}
			.project_content {
				&_inner {
					.no {
						font-size: 60px;
						margin-bottom: 20px;
					}
				}
			}
		}
	}
	@media #{$xs} {
		&-item {
			.project_image {
				max-height: 420px;
			}
			.project_content {
				padding: 30px 20px 40px;

				&_inner {
					.no {
						font-size: 50px;
						margin-bottom: 15px;
					}
				}
			}
		}
	}
}
/* !END: H6 Projects CSS */