@keyframes animateProjectName {
	 from {
		 transform: translateX(100%);
	}
	 to {
		 transform: translateX(-100%);
	}
}
 .projects {
	 display: flex;
	 flex-direction: column;
	 row-gap: 50px;
	 margin: 0 16px;
	 place-self: start;
     margin-top: 6rem;
}
 @media (min-width: 768px) {
	 .projects {
		 display: grid;
		 grid-template-columns: repeat(2, 1fr);
		 column-gap: 16px;
         
         /* margin-top: 5rem; */
	}
}
 @media (min-width: 1024px) {
	 .projects {
		 column-gap: 48px;
		 row-gap: 100px;
		 margin: 0 48px;
         margin-top: 6rem;
	}
}
 @media (min-width: 1440px) {
	 .projects {
		 column-gap: 200px;
		 margin: 0 1000px;
	}
}
 .project {
	 display: flex;
	 flex-direction: column;
	 text-decoration: none;
	 /* cursor: none; */
	 transition: transform 0.35s cubic-bezier(0.56, 0.42, 0.28, 0.95), opacity 0.15s ease;
}
 @media (min-width: 768px) {
	 .project:nth-child(2) {
		 /* margin-top: 20%; */
	}
	 .project:nth-child(3) {
		 /* margin-top: -20%; */
	}
}
 .project__image {
	 display: flex;
	 align-items: flex-start;
	 margin: 0 0 16px;
	 overflow: hidden;
	 background: #202020;
	 border-radius: 20px;
	 transition: border-radius 0.5s cubic-bezier(0.56, 0.42, 0.28, 0.95);
}
 .project__image img {
	 aspect-ratio: 1;
	 width: 100%;
	 height: auto;
	 border-radius: inherit;
	 object-fit: cover;
	 opacity: 1;
	 transition: transform 0.8s cubic-bezier(0.56, 0.42, 0.28, 0.95);
}
 .project__title, .project__description {
	 width: fit-content;
	 overflow: hidden;
}
 .project__title p {
	 color: #D51067;
	 font-size: 28px;
	 font-weight: 500;
	 margin: 0 0 8px;
	 transition: transform 0.3s cubic-bezier(0.56, 0.42, 0.28, 0.95) 0.2s;
}
 .project__description p {
	 font-size: 14px;
	 color: black;
	 margin: 0;
	 transition: transform 0.4s cubic-bezier(0.56, 0.42, 0.28, 0.95);
}
 .project.project--hovered .project__title p, .project.project--hovered .project__description p {
	 transform: translateY(150%);
}
 .projects.projects--hovered .project:not(.project--hovered) {
	 transform: scale(0.87);
	 opacity: 0.4;
}
 .project.project--hovered .project__image {
	 border-radius: 50%;
}
 .project.project--hovered .project__image img {
	 transform: scale(1.12);
}