.project-item-list {
	display: flex;
	flex-wrap: wrap;
	column-gap: 0.5rem;
	row-gap: 1.5rem;
	margin: 1.25rem 0;
}

.project-item {
	display: flex;
	flex-direction: row;
	width: 500px;
	height: 90px;
	border: 1px solid #d7d7d7;
	border-radius: 4px;
}

.project-item .image-container {
	width: 160px;
	height: 90px;
}

.project-item .image-container img {
	object-fit: cover;
	width: 160px;
	height: 90px;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}

.project-item .content {
	padding: 1rem;
}

.project-item .content .title {
	color: var(--title-font-color);
	text-align: left;
	line-height: 1.5rem;
	font-weight: 400;
}

.project-item .content .subtitle {
	text-align: left;
	line-height: 1.5rem;
}

.project-item .info-container {
	display:flex; 
	flex-grow: 1; 
	padding: 0.5rem; 
	justify-content: flex-end;

	@media screen and (max-width: 480px) {
		padding-top: 0;
	}
}

.project-item .info-container button {
	all: unset;
	color: gray;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 3px;
	cursor: pointer;
	width: 24px; 
	height: 24px;
}

.project-item .info-container button:hover {
	background-color: rgb(235, 235, 235);
}

@media screen and (max-width: 480px) {
  .project-item {
	height: auto;
	flex-wrap: wrap;
	width: 160px;
  }

  .project-item .content {
	padding: 0.5rem;
  }

  .project-item .image-container img {
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	border-bottom-left-radius: 0;
  }
}