.project-container {
	display: table;
	transition: transform 150ms ease-out, box-shadow 150ms ease-out;
	text-decoration: none;
}

.project-clickable:hover {
	box-shadow: 0px 0px 4px rgb(102, 102, 102);
	transform: translate(-0.10rem, -0.25rem);
	transition: transform 150ms ease-out, box-shadow 150ms ease-out;
}

.portfolio-image {
	width: 100%;
	transition: transform 150ms ease-out;
}

.portfolio-image:hover {
	transform: translate(-0.10rem, -0.25rem);
	transition: transform 150ms ease-out;
}

@media (max-width: 768px) {
    .project-container {
        display: flex;
        flex-direction: column;
    }
    .project-image {
        order: -1; /* Moves image to the top */
    }
}

.project-container .project-image {
	display: flex;
	align-items: center; /* centers vertically */
	justify-content: center; /* optional: centers horizontally */
  }