.project {
	font-size: 18px;
	text-align: center;
	padding-bottom: 20px;
	width: 97%;
	/* height: 190px; */
	margin: 30px;
	vertical-align: top;
	text-align:center;
	background: #f0f0f0;
	padding: 10px;
	font-size: 14px; 
} 

.project h3 {
	font-size: 150%;
}
.project h4 {
	font-size: 120%;
}

.project>div img {
	min-width: 240px;
	max-width: 35%;
	max-height: 300px;
	min-height: 160px;
	height: auto;
	object-fit: contain;
	display: inline-block;
}

.project>div div {
	color: #000;
	display: inline-block;
	flex: 1;              /* take up all remaining space */
	margin-left: 1rem;    /* spacing between image and content */
}

.project>div {
	/* Main */
	display: flex;
	width: 100%;
}
.project>div:last-child::before {
	content: "Publications:";
	display: block;
	font-weight: bold;
	font-size: 14px;
	margin-top: 10px;
}
.project>div:last-child {
	/* Papers */
	font-size: 12px;
	display: block;
	width: 100%;
	text-align: left;
	color: #000;
}

.project div h3 {
	text-align: left;
}

.project a {
	color: #045A7B;
	text-decoration: none;
}

.project a:hover{
	color: mediumvioletred
}

.project a.project_page, .project a.dataset, .project a.code, .project a.model {
	display: inline-block;
	min-width: 120px;
	max-width: 30%;
	min-height: 60px;
	max-height: 120px;
	text-align: center;
	margin: 10px;
	font-weight: bold;
}

.project a.project_page::before, .project a.dataset::before, .project a.code::before, .project a.model::before {
  display: block;
  margin: auto;
  content: "";
  vertical-align: middle;
  height: 100px;
  width: 100px;
  margin-right: 0.4em;      /* space between icon and text */

}

.project a.project_page::before {
  background: url("/site_images/icons/globe-alt2-symbolic.svg") no-repeat center/contain;
}
.project a.project_page::after {
  content: "Project Page";
}

.project a.dataset::before {
  background: url("/site_images/icons/file-cabinet-symbolic.svg") no-repeat center/contain;
}
.project a.dataset::after {
  content: "Dataset";
}

.project a.code::before {
  background: url("/site_images/icons/code-symbolic.svg") no-repeat center/contain;
}

.project a.code::after {
  content: "Code";
}

.project a.model::before {
  background: url("/site_images/icons/harddisk-symbolic.svg") no-repeat center/contain;
}

.project a.model::after {
  content: "Checkpoint";
}

.project>div:last-child a.arxiv::before {
	content: url("/site_images/icons/archive-symbolic-red.svg");
}

.project>div:last-child a.arxiv::after {
	content: " Preprint";
	color: #b31b1b;
}

.project>div:last-child a.publisher::before {
	content: url("/site_images/icons/search-global-symbolic-yellow.svg");
}

.project>div:last-child a.publisher::after {
	content: " Published";
	color: #ddaa22;
}

@media (max-width: 768px) {
    .project>div img {
        display: block;
        margin: 0 auto; /* Center the image */
    }
    
    .project>div div {
        display: block;
        width: 100%; /* Occupy the whole column width */
        margin-left: 0; /* Remove left margin on small screens */
        margin-top: 1rem; /* Add some top spacing instead */
    }
    
    .project>div {
        flex-direction: column; /* Stack items vertically */
    }
}