﻿@media (min-width: 1190px) {
	#image-covercontainer {
		max-width: 525px;
		height: 350px;
		min-width: 422px;

		margin-left: -20px;
		margin-right: 0px;
		margin-top: 0px;
		margin-bottom: 0px;

		align-items: center;
		justify-items: center;

		object-fit: contain;
		overflow: hidden;
	}
	#image-coverphoto {
		width: 525px;
		height: 350px;

		display: flex;
	}

	.image-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(100px, 200px));
		justify-content: center;
		gap: 1rem;

		margin-bottom: 20px;
	}
	.image-gridentry {
		max-width: 200px;
		max-height: 200px;

		margin-left: auto;
		margin-right: auto;

		display: flex;
		justify-content: space-around;
		align-items: center;

		object-fit: contain;
	}
	.image-photoitem {
		max-width: 100%;
		max-height: 100%;

		border-radius: 10px;
		border: 3px solid #003365FF;
	}
}

@media (min-width: 800px) and (max-width: 1189px) {
	#image-covercontainer {
		width: inherit;

		margin-top: 0px;
		margin-bottom: 0px;

		object-fit: contain;
	}
	#image-coverphoto {
		max-width: 100%;
	}

	.image-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(100px, 200px));
		justify-content: center;

		gap: 1rem;
		margin-top: 2rem;
	}
	.image-gridentry {
		max-width: 200px;
		max-height: 200px;

		display: flex;
		justify-content: space-around;
		align-items: center;

		object-fit: contain;
	}
	.image-photoitem {
		max-width: 100%;
		max-height: 100%;		

		border-radius: 10px;
		border: 3px solid #003365FF;
	}
}

@media (min-width: 500px) and (max-width: 799px) {
	#image-covercontainer {
		width: inherit;
		margin-top: 0px;
		margin-bottom: 0px;
		object-fit: contain;
	}
	#image-coverphoto {
		max-width: 100%;
	}

	.image-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(100px, 200px));
		justify-content: center;

		gap: 1rem;
		margin-top: 2rem;
	}
	.image-gridentry {
		max-width: 200px;
		max-height: 200px;

		display: flex;
		justify-content: space-around;
		align-items: center;

		object-fit: contain;
	}
	.image-photoitem {
		max-width: 100%;
		max-height: 100%;

		border-radius: 10px;
		border: 3px solid #003365FF;
	}
}

@media (min-width: 0px) and (max-width: 499px) {
	#image-covercontainer {
		width: inherit;
		margin-top: 0px;
		margin-bottom: 0px;
		object-fit: contain;
	}
	#image-coverphoto {
		max-width: 100%;
	}

	.image-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(100px, 200px));
		justify-content: center;

		gap: 1rem;
		margin-top: 2rem;
	}
	.image-gridentry {
		max-width: 200px;
		max-height: 200px;

		display: flex;
		justify-content: space-around;
		align-items: center;

		object-fit: contain;
	}
	.image-photoitem {
		max-width: 100%;
		max-height: 100%;

		border-radius: 10px;
		border: 3px solid #003365FF;
	}
}