.project-container {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.project-container h2 {
  margin-top: 0;
}
.project-container .project {
  /*margin-left: 10%;*/
  max-width: 900px;
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
@media only screen and (max-width: 550px) {
  .project-container .project {
    flex-direction: column;
  }
}
.project-container .project .graphic {
  min-width: 250px;
  min-height: 375px;
  position: relative;
}
.project-container .project .graphic .graphic-inner {
  position: absolute;
  width: 240px;
  height: 365px;
  margin: 5px;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: -5px 5px 5px rgba(255, 255, 255, 0.2);
  transition-duration: 150ms;
}
.project-container .project .graphic .graphic-inner:hover {
	width: 250px;
	height: 375px;
	margin: 0px;
}
.project-container .project .graphic .graphic-inner .graphic-image {
  position: absolute;
	left: -5px;
	top: -5px;
  transition-duration: 150ms;
}
.project-container .project .graphic .graphic-inner:hover > .graphic-image {
	left: 0px;
	top: 0px;
}
.project-container .project .graphic .graphic-inner .graphic-image {
  width: 250px;
  height: 375px;
}
.project-container .project .graphic img {
  margin: 0;
  width: 250px;
  height: 375px;
}
.project-container .project .content {
}