.projects-page {

  	.container-main {
		margin: var(--size-48px) auto 0;
  		padding: 0 var(--size0to16);
	}
    
	.container-title {
		max-width: var(--size-mobile-max);
		margin: 0 auto;
		text-align: center;
		.main-title {
			color: var(--white);
		}
		.line {
			display: block;
			width: 6rem;
			height: 0.375rem;
			margin: 0 auto;
			background: var(--brand-green);
			border-radius: var(--size-04px);
		}
	}

	.description {
		text-align: center;
		margin: var(--size-16px) auto 0;
		width: 35ch;		
		@media screen and (min-width: 37.5rem){
			width: 450px;
		}
		@media screen and (min-width: 48rem){
			margin-top: var(--size-20px);
			width: auto;
			max-width: clamp(28.125rem, 10.2679rem + 37.2024vw, 43.75rem)
		}
	}

	.projects-list {
		max-width: var(--size-mobile-max);
		margin: var(--size-64px) auto 0;
		.project-card {
			max-width: var(--size-mobile-max);
			background: hsla(222, 14%, 14%, 0.5);
			border-radius: var(--size-08px);
			margin-top: var(--size-24px);
			.container-image {
				height: 11.5rem;
				.project-image {
					width: 100%;
					height: 100%;
					border-top-left-radius: var(--size-08px);
					border-top-right-radius: var(--size-08px);
					opacity: 0.6;
				}
			}
			.project-content {
				padding: var(--size-24px) var(--size-16px);
				.title {

				}
				.text {
					margin-top: var(--size-16px);
					color: var(--grey);
				}
				.list-techno {
					margin-top: var(--size-16px);
					flex-wrap: wrap;
					row-gap: var(--size-04px);
					.li-techno {
						background: #262A33;
						color: var(--brand-green);
						border-radius: var(--size-08px);
						border: 0.0625rem solid hsla(171, 71%, 47%, 0.2);
						margin-right: var(--size-08px);
						padding: var(--size-04px) var(--size-08px);
					}
				}
				.project-link {
					width: 100%;
					height: var(--size-40px);
					display: flex;
					justify-content: center;
					align-items: center;
					color: var(--brand-green);
					margin-top: var(--size-24px);
					border: 0.0625rem solid hsla(171, 71%, 47%, 0.5);
					border-radius: var(--size-04px);
					.link {
					}
					.arrow {
						margin-left: var(--size-16px);
					}
      			}
			}
		}
		@media screen and (min-width: 37.5rem){
			max-width: var(--size-500);
			.project-card {
				max-width: 31rem;
				.container-image {
					width: 100%;
					height: 17.4375rem;
				}
				.project-content {
					padding: var(--size-24px) var(--size-24px) var(--size-20px);
					.project-link {
					margin-top: var(--size-16px);
					}
				}
			}
		}
		@media screen and (min-width: 48rem){
			max-width: var(--size700to1024);
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			.project-card {
				max-width: 31rem;
				width: 48%;
				.container-image {
					width: 100%;
					height: clamp(13rem, 7.8571rem + 10.7143vw, 17.5rem);
				}
				.project-content {
					padding: var(--size-24px) var(--size-24px) var(--size-20px);
					.project-link {
					margin-top: var(--size-16px);
					}
				}
			}
		}
	}

	.work-together {
		text-align: center;
		background: #1E2128;
		margin-top: var(--size-64px);
		padding: var(--size-64px) 0 var(--size-48px);
		.container{
			max-width: var(--size-mobile-max);
			margin: 0 auto;
		}
		.icon-large {
			width: 3.5rem;
			height: 3.5rem;
			img {
				width: 2rem;
				height: 2rem;
			}	
		}
		.title {
			margin-top: var(--size-32px);
		}
		.text {
			margin-top: var(--size-20px);
		}
		.btn-primary{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 14.125rem;
			height: 3.5rem;
			margin: var(--size-48px) auto 0;
			background: var(--brand-green);
			border-radius: var(--size-08px);
		}

		@media screen and (min-width: 37.5rem){
			.container{
				max-width: var(--size-500);
			}
		}

		@media screen and (min-width: 48rem){
			padding: var(--size-80px) 0;
			.container{
				max-width: var(--size-500-820);
			}
			.title {
				margin-top: var(--size-48px);
			}
			.text {
				margin-top: var(--size-24px);
			}
		}
	}


}