.slides.project .projectImgContainer {
	overflow: auto;
	height: var(--coverImageHeight);
	width: var(--coverImageWidth);
	flex: 0 0 var(--coverImageWidth);
	display: block;
}

.projectImgContainer img {
	height: auto;
	width: auto;
	object-fit: cover;
	object-position: 0% 0%;
	display: block;
}

.rest.project {
	background-color: rgba(0, 0, 0, 0.3);
	padding: 10px 20px;
}

.rest.project:hover {
	background-color: rgba(0, 0, 0, 0.8);
}

.projectContent {
	display: grid;
	width: var(--elWidth);
	grid-template-columns: 1fr 2fr;
	gap: var(--sectionItemPadding);
}

.siContainer {
	aspect-ratio: 1/1.3;
}

.flipper.special {
	border: 2px dotted var(--color1);
}

.projectRight {
	background: var(--containerBg);
	padding: var(--sectionItemPadding);
	height: fit-content;
	align-self: start;
}

.projectRight h2 {
	margin-bottom: calc(var(--sectionItemPadding) / 4);
	font-size: 1.3em;
}

.collaborators {
	margin-bottom: calc(var(--sectionItemPadding) / 2);
}

.collaborators.columns {
	display: flex;
	justify-content: space-between;
}

.column1,
.column2 {
	width: 48%;
}

.collaborators div:not(:last-of-type) {
	margin-bottom: calc(var(--sectionItemPadding) / 4);
}

.projectRight .contentWrapper {
	height: fit-content;
	flex: none;
}

.projectText {
	columns: 2;
	text-align: justify;
	column-gap: calc(var(--sectionItemPadding) / 2);
}

.back .contentWrapper > div:last-of-type{
  margin-bottom: 0;
}


/* Discrepancy is due to the NavBar's height */

@media (min-aspect-ratio: 1.43 / 1) {
	.projectImgContainer:not(.NDDC):not(.GV):not(.SG):not(.art) img {
		width: var(--coverImageWidth);
	}
}
@media (max-aspect-ratio: 1.43 / 1) {
	.projectImgContainer:not(.NDDC):not(.GV):not(.SG):not(.art) img {
		height: var(--coverImageHeight);
	}
}

@media (min-aspect-ratio: 0.9 / 1) { .GV img { width: var(--coverImageWidth); } } 
@media (max-aspect-ratio: 0.9 / 1) {
	.GV img {
		height: var(--coverImageHeight);
	}
}

@media (min-aspect-ratio: 1.264 / 1) {
	.SG img {
		width: var(--coverImageWidth);
	}
}
@media (max-aspect-ratio: 1.264 / 1) {
	.SG img {
		height: var(--coverImageHeight);
	}
}

@media (min-aspect-ratio: 0.7 / 1) {
	.NDDC img {
		width: var(--coverImageWidth);
	}
}
@media (max-aspect-ratio: 0.7 / 1) {
	.NDDC img {
		height: var(--coverImageHeight);
	}
}

@media (min-aspect-ratio: 1.5 / 1) {
	.art img {
		width: var(--coverImageWidth);
	}
}
@media (max-aspect-ratio: 1.5 / 1) {
	.art img {
		height: var(--coverImageHeight);
	}
}

@media (max-width: 1300px) and (min-width: 1025px) {
	.projectRight * {
		font-size: 0.9rem;
	}

	.projectRight h2 {
		font-size: 1.2rem;
	}
}

@media (max-width: 1250px) and (min-width: 801px) {
	.projectRight .contentWrapper {
		max-height: 40vh;
	}

	.projectContent {
		grid-template-columns: 1.5fr 2fr;
	}

	.collaborators.columns {
		display: block;
	}
	.column1 {
		margin-bottom: calc(var(--sectionItemPadding) / 2) !important;
	}
	.column1,
	.column2 {
		width: 100%;
	}

	.projectText {
		columns: 1;
	}
}

@media (max-width: 900px) and (min-width: 801px) {
	.projectRight * {
		font-size: 0.8rem;
	}
}

@media (max-width: 800px) or (max-aspect-ratio: 1/3) {
	:root {
		--sectionItemPadding: var(--halfUnit);
	}

	.rest.project {
		font-size: 1.5rem;
		padding: 7.5px 15px;
	}

	.projectContent {
		grid-template-columns: 1fr;
	}

	.siContainer {
		width: 50vw;
		margin: 0 auto;
	}

	.projectText {
		columns: 2;
	}
}

@media (max-width: 700px) or (max-aspect-ratio: 1/3) {
	.siContainer {
		width: 65vw;
	}

	.projectRight .contentWrapper {
		max-height: 40vh;
	}

	.collaborators.columns {
		display: block;
	}
	.column1 {
		margin-bottom: calc(var(--sectionItemPadding) / 2) !important;
	}
	.column1,
	.column2 {
		width: 100%;
	}

	.projectText {
		columns: 1;
	}
}

@media (max-width: 450px) or (max-aspect-ratio: 1/3) {
	.siContainer {
		width: 70vw;
	}

	.rest.project {
		padding: 5px 10px;
		font-size: 1.2rem;
	}

	.projectRight * {
		font-size: 0.8rem;
	}

	.projectRight h2 {
		font-size: 1rem;
	}
}



@media (min-aspect-ratio: 1.75 / 1) and (max-height: 900px) {
	.projectContent {
		grid-template-columns: 1.5fr 2fr;
		gap: var(--quarterUnit);
		width: 100%;
	}

	.siContainer{
		width: 100%;
		margin: none;
	}

	.projectRight *{
		font-size: 0.8rem;
	}

	.projectRight .contentWrapper {
		max-height: 80vh;
	}
}