/* Vox Populi */

/* Styles for mobile */
@media only screen and (max-width: 575.98px) {
	#vox-populi {
		margin: 2rem auto;
	}
	/* Uneven start for 1st image */
	#vox-populi .col-6:nth-child(1) {
		/* take into account grid gap for g-3 */
		margin-top: calc(1rem + 24px - 12px);
	}
	#vox-populi .instruction {
		font-size: 0.6rem;
	}
}
/* Styles for tablet */
@media only screen and (min-width: 575.99px) {
	/* Uneven start for 1st image */
	#vox-populi .col-6:nth-child(1) {
		/* take into account grid gap for g-4 */
		margin-top: calc(3rem + 48px - 12px);
	}
	#vox-populi .instruction {
		font-size: 1rem;
	}
}
@media screen and (min-width: 768px) { 
	#vox-populi .title {
		text-transform: full-width;
	}
}
/* Styles for desktop */
@media only screen and (min-width: 991.99px) {
	/* Uneven start for 1st & 3rd image on tablet & desktop */
	#vox-populi .col-6:nth-child(1) {
		/* take into account grid gap (24 px) */
		margin-top: calc(4rem + 24px - 12px);
	}
	#vox-populi .col-6:nth-child(3) {
		/* take into account grid gap (24 px) */
		margin-top: calc(7rem + 24px - 12px);
	}
}

#vox-populi {
	width: 75vw;
}
#vox-populi .row {
	position: relative;
}
#vox-populi .col-6:nth-child(2) {
	/* trim margin top from gutter of first 3 image */
	margin-top: calc(var(--bs-gutter-y) * 0.6);
}

/* Card styles */
#vox-populi .card {
	background-color: transparent;
	border: none;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
	filter: progid:DXImageTransform.Microsoft.Shadow(color = #343434, direction = 135, strength = 2);
	display: block;
	transition: all 0.4s ease-out;
}
#vox-populi .card:hover {
	box-shadow: 0 1px 7px rgba(0, 0, 0, 0.8);
	-moz-box-shadow: 0 1px 7px rgba(0, 0, 0, 0.8);
	-webkit-box-shadow: 0 1px 7px rgba(0, 0, 0, 0.8);
	filter: progid:DXImageTransform.Microsoft.Shadow(color = #2c2c2c, direction = 135, strength = 3);
	transform: scale(1.1);
}
#vox-populi .card,
#vox-populi .card img {
	border-radius: 1px;
}

/* Text */
#vox-populi .title {
	font-variant: small-caps;
	text-align: center; 
	font-weight: bold;
}
#vox-populi .instruction {
	text-align: center;
}

/* Modal */
#vox-populi a:focus {
	border: none;
}
#vox-populi .modal-body {
	text-align: center;
}
#img-preview {
	max-width: 100%;
    vertical-align: middle;
	object-fit: contain;
}