.project.cover 
{
	opacity: 0.5;
}

#entry .framed
{
	transform: rotate(1.5deg);
}

#problem .challenges
{
	flex-direction: column;
	gap: 2rem;
}

#problem .challenges img 
{
    order: 1;
    width: 85rem;
    height: auto;
    margin-bottom: -10rem;
    transform: rotate(1deg);
}

#interviews img
{
	width: 54rem;
}

#usability .project.framed img
{
	width: 32rem;
}

#usability img.stamp 
{
    width: 16rem;
    transform: translate(calc(-50% - 34rem), calc(-50% - 1rem));
    left: 50%;
    top: 50%;
    position: absolute;
}

#usability .collage
{
	margin: 0rem 0rem 0rem 30rem;
}

#abtests img
{
	width: 24rem;
    margin: 0 3rem;
}

#surveys .project.framed img
{
	width: 28rem;
    border: none;
}

#surveys .project.framed.primary
{
	transform: rotate(22deg);
}

#surveys .project.framed.one
{
	transform: translate(-24rem, -7rem) rotate(-6deg);
}

#surveys .project.framed.two
{
	transform: translate(-12rem, -5rem) rotate(7deg);
}

#surveys .collage
{
	margin: 7rem 6rem 0rem 25rem;
}

#pm img
{
	width: 72rem;
    transform: rotate(-1deg);
}

#stakeholders .quote.one
{
	transform: rotate(-1deg);
}

#stakeholders .quote.two
{
	transform: translate(-23rem, -9rem) rotate(1deg);
}

#stakeholders .quote.three
{
	transform: translate(-30rem, 3rem) rotate(-2deg);
}

#stakeholders .collage
{
	margin: 9rem 0rem 3rem 30rem;
}

#devsessions .project.framed img
{
	width: 48rem;
	border: none;
}

#devsessions .project.framed:not(.primary)
{
	transform: translate(-50rem, 0rem);
}

#devsessions .collage
{
	margin: 5rem 0rem 0rem 50rem;
}

#devsessions .collage > img
{
	position: absolute;
	left: 0;
    transform: translate(-6rem, -5rem);
    top: 0;
    width: 10rem;
}

#dsystem .project.framed.primary img
{
	width: 50rem;
}

#dsystem .project.framed.one img 
{
    width: 30rem;
    border: none;
}

#dsystem .project.framed.two img 
{
    width: 40rem;
    border: none;
}

#dsystem .project.framed.primary
{
	transform: rotate(1deg);
}

#dsystem .project.framed.one
{
	transform: translate(-24rem, 5.5rem);
}

#dsystem .project.framed.two
{
	transform: translate(40rem, 6rem);
}

#dsystem .collage
{
	margin: 0rem 26rem 0rem 24rem;
}

#result .project.framed img
{
	width: 48rem;
}

#result .stamp
{
	width: 64rem;
}

#result .project.framed.one
{
	grid-row: 2;
	grid-column: 1;
	transform: translate(-5rem, 0) rotate(-3deg);
}

#result .project.framed.two
{
	grid-row: 4;
	grid-column: 1;
	transform: translate(-8rem, 0) rotate(4deg);
}

#result .stamp.one
{
	grid-row: 1;
	grid-column: 1;
	margin: -2rem 0 -22rem 0;
	transform: rotate(-1deg);
}

#result .stamp.two
{
	grid-row: 3;
	grid-column: 1;
	margin: -8rem 0 -18rem 0;
	transform: rotate(1deg);
}

#result .description.one
{
	grid-row: 2;
	grid-column: 2;
}

#result .description.two
{
	grid-row: 4;
	grid-column: 2;
}

@media (max-width: 1920px)
{
	#dsystem .project.framed.primary img 
	{
    	width: 44rem;
	}

	#dsystem .project.framed.two img 
	{
    	width: 34rem;
	}

	#dsystem .project.framed.one img 
	{
    	width: 25rem;
	}

	#dsystem .project.framed.one 
	{
    	transform: translate(-20rem, 5.5rem);
	}

	#dsystem .project.framed.two 
	{
    	transform: translate(35rem, 6rem);
	}
}

@media (max-width: 1600px)
{
	#dsystem .project.framed:not(.primary) img 
	{
    	display: none;
	}
}

@media (max-width: 1600px), (max-height: 1080px)
{
	#interviews img 
	{
    	width: 46rem;
	}

	#usability .project.framed img 
	{
    	width: 25rem;
	}

	#usability img.stamp 
	{
		width: 13rem;
		transform: translate(calc(-50% - 27rem), calc(-50% - 0.5rem));
	}

	#usability .collage 
	{
    	margin: 0rem 0rem 0rem 20rem;
	}

	#abtests img 
	{
    	width: 20rem;
    	margin: 0 2rem;
	}

	#surveys .project.framed img 
	{
    	width: 24rem;
    	border: none;
	}

	#surveys .project.framed.one 
	{
    	transform: translate(-17rem, -5rem) rotate(-6deg);
	}

	#surveys .project.framed.two 
	{
    	transform: translate(-8rem, -4rem) rotate(7deg);
	}
	
	#surveys .collage 
	{
    	margin: 5rem 5rem 0rem 17rem;
	}

	#pm img 
	{
    	width: 60rem;
	}

	#stakeholders .quote.two 
	{
    	transform: translate(-17rem, -7rem) rotate(1deg);
	}

	#stakeholders .quote.three 
	{
    	transform: translate(-23rem, 3rem) rotate(-2deg);
	}

	#stakeholders .collage 
	{
    	margin: 7rem 0rem 3rem 22rem;
	}

	#devsessions .project.framed img
	{
    	width: 39rem;
	}

	#devsessions .project.framed:not(.primary) 
	{
    	transform: translate(-40rem, 0rem);
	}

	#devsessions .collage 
	{
    	margin: 5rem 0rem 0rem 40rem;
	}
	

	#dsystem .collage 
	{
    	margin: 0;
	}
}

@media (max-width: 1360px)
{
	.challenges .descriptions 
	{
		flex: 0 1 auto;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto;
	}

	#devsessions .project.framed:not(.primary),
	#devsessions .collage > img
	{
    	display: none;
	}

	#devsessions .collage 
	{
    	margin: 0;
    	transform: rotate(-1deg);
	}

	#problem .challenges img
	{
		display: none;
	}

	#result .project.framed img 
	{
    	width: 40rem;
	}

	#result .project.framed.one
	{
		grid-row: 1;
		grid-column: 1;
		transform: rotate(-3deg);
	}

	#result .project.framed.two
	{
		grid-row: 3;
		grid-column: 1;
		transform: rotate(4deg);
	}

	#result .stamp
	{
		display: none;
	}

	#result .description.one
	{
		grid-row: 2;
		grid-column: 1;
	}

	#result .description.two
	{
		grid-row: 4;
		grid-column: 1;
	}
}

@media (max-width: 1024px)
{
	#entry img, #entry svg 
	{
    	width: 30rem;
	}

	#interviews img 
	{
    	width: 36rem;
	}

	#usability img.stamp 
	{
		display: none;
	}

	.project.framed.primary 
	{
    	transform: rotate(3deg);
	}
	
	#usability .collage 
	{
    	margin: 0;
	}

	#surveys .project.framed.primary 
	{
    	transform: rotate(-3deg);
	}

	#surveys .project.framed:not(.primary)
	{
		display: none;
	}

	#surveys .collage 
	{
    	margin: 0;
	}

	#stakeholders .quote.two 
	{
    	transform: translate(-16rem, -7rem) rotate(1deg);
	}

	#stakeholders .quote.three 
	{
    	transform: translate(-12rem, 7rem) rotate(-2deg);
	}

	#stakeholders .collage 
	{
    	margin: 7rem 0rem 8rem 14rem;
	}

	#dsystem .project.framed.primary img 
	{
    	width: 32rem;
	}

	#result .project.framed img 
	{
    	width: 32rem;
	}
}

@media (max-width: 640px), (max-height: 800px) and (max-width: 1360px)
{
	#entry img, #entry svg 
	{
 	   width: 22rem;
	}
	
	#interviews img 
	{
    	width: 22rem;
	}

	#usability .project.framed img 
	{
    	width: 20rem;
	}

	#surveys .project.framed img 
	{
    	width: 20rem;
	}

	#stakeholders .collage 
	{
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: 2.5rem;
		margin-bottom: 2rem;
	}

	#stakeholders .quote.one 
	{
    	transform: rotate(-4deg);
	}

	#stakeholders .quote.two 
	{
    	transform: translate(-1rem) rotate(1deg);
	}

	#stakeholders .quote.three 
	{
    	transform: translate(1rem) rotate(3deg);
	}

	#devsessions .project.framed img 
	{
    	width: 22rem;
	}

	#dsystem .project.framed.primary img 
	{
    	width: 21rem;
	}

	#result .project.framed img 
	{
    	width: 22rem;
	}

	#result .project.framed 
	{
		margin: 0 -2rem;
	}
}