@use "../utilities" as *;

/* START: Case Study CSS */
.h11-project {
	&-item {
		display: flex;
		flex-wrap: wrap;
		gap: 115px;
		padding: 30px 0;
		background-color: transparent;
		border-top: 1px solid var(--tj-color-border-1);
		border-radius: 0;
		&:last-child {
			border-bottom: 1px solid var(--tj-color-border-1);
		}
		.project {
			&-img {
				max-width: 240px;
				width: 100%;
				height: 180px;
				border-radius: 10px;
				flex: 0 0 auto;
				@media #{$md} {
					max-width: 190px;
					height: 140px;
				}
				@media #{$sm,$xs} {
					max-width: 100%;
					height: 100%;
				}
			}
			&-sl {
				font-size: 32px;
				line-height: 1;
				color: var(--tj-color-common-black);
				font-weight: var(--tj-fw-medium);
				letter-spacing: -0.03em;
				@media #{$md} {
					font-size: 28px;
				}
				@media #{$sm,$xs} {
					font-size: 25px;
				}
			}
			&-content {
				flex: 1;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				padding: 0;
				@media #{$sm,$xs} {
					flex-direction: column;
					align-items: start;
					position: relative;
				}
			}
			&-text {
				display: block;
				margin-top: 0;
				flex: 1;
				margin-inline-start: 168px;
				.title {
					max-width: 316px;
					width: 100%;
					font-weight: var(--tj-fw-medium);
					margin-top: 13px;
					@media #{$md} {
						max-width: 285px;
					}
					@media #{$sm,$xs} {
						max-width: 265px;
					}
				}
				@media #{$lg} {
					margin-inline-start: 100px;
				}
				@media #{$md} {
					margin-inline-start: 60px;
				}
				@media #{$sm,$xs} {
					margin-inline-start: 0;
					margin-top: 25px;
				}
			}
			&-btn {
				opacity: 1;
				i {
					transform: rotate(-45deg);
					&:last-child {
						font-size: 62px;
						color: var(--tj-color-theme-primary);
						transform: rotate(-45deg) scale(0);
						visibility: hidden;
						position: absolute;
					}
				}
				@media #{$sm,$xs} {
					position: absolute;
					inset-inline-end: 0;
					bottom: 0;
				}
			}
		}
		&:hover {
			.project-btn {
				i {
					&:first-child {
						transform: rotate(-45deg) scale(0);
					}
					&:last-child {
						transform: rotate(-45deg) scale(1);
						visibility: visible;
					}
				}
			}
		}
		@media #{$lg} {
			gap: 80px;
		}
		@media #{$md} {
			gap: 40px;
		}
		@media #{$sm,$xs} {
			gap: 30px;
		}
	}
}

/* !END: Case Study CSS */