#projects {
	& > .projects-container {
		display: grid;
		gap: 2rem;
		grid-template-columns: repeat(1, minmax(0, 1fr));

		& > .project-container-card {
			/* Base card styling */
			border-radius: 1rem;
			position: relative;
			& > .project-container-card-image {
				height: 200px; /* Fixed height for consistency */
				width: 100%;
				overflow: hidden;
				/* Match the top border radius of the card, but not the bottom */
				border-top-left-radius: 1rem;
				border-top-right-radius: 1rem;
				transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);

				& > img {
					width: 100%;
					height: 100%;
					object-fit: cover; /* Ensures image covers container without distortion */
					display: block;
					transition: transform 0.6s ease-in-out;
				}
			}
			& > .project-container-card-content {
				padding: 2rem;
				background-color: transparent;

				.project-container-card-content-title {
					font-size: 1.5rem;
					font-weight: 700;
					margin-bottom: 0.5rem;
					color: var(--color-primary);
				}

				.project-container-card-content-description {
					color: var(--color-text_medium);
					margin-bottom: 1rem;
					line-height: 1.5;
				}
				.project-container-card-content-list {
					display: flex;
					flex-wrap: wrap;
					gap: 0.5rem;
					margin-top: 1rem;
					margin-bottom: 1.5rem;
					& > .project-container-card-content-list-item {
						background-color: hsl(var(--hue-secondary), 50%, 15%); /* Dark secondary background */
						color: var(--color-secondary);
						padding: 0.25rem 0.75rem;
						border-radius: 9999px; /* Pill shape */
						font-size: 0.75rem;
						font-weight: 600;
						transition: background-color 0.3s;
						&:hover {
							background-color: hsl(var(--hue-secondary), 70%, 25%);
						}
					}
				}
				& > .project-container-card-content-link {
					display: inline-flex;
					align-items: center;
					color: var(--color-primary);
					font-weight: 600;
					text-transform: uppercase;
					font-size: 0.875rem;
					transition: transform 0.3s ease, color 0.3s ease;
					&:hover {
						color: var(--color-secondary); /* Switch color on hover */
						transform: translateX(4px);
					}

					& > svg {
						margin-left: 0.5rem;
						transition: transform 0.3s ease;
					}
				}
			}
		}
	}
}

@media (min-width: 640px) {
	.projects-container {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (min-width: 1024px) {
	.projects-container {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}