/* alumni */
.alumni .flex-col {
	justify-content: flex-end;
}

.alumni img {
	width: 100%;
	display: block;
}

img.flag {
	width: 25px;
	height: 25px;
	border-radius: 50%;
}

.alumni .grid {
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
}

.alumni .img-container {
	width: 100%;
	/* height: clamp(250px, 20vw, 500px); */
}

.alumni h2 {
	color: var(--textWhite);
	font-size: var(--fontSizeOK);
	font-weight: 600;
	margin-top: 1rem;
	letter-spacing: 0.5px;
}

.alumni h3 {
	font-size: var(--fontSizeOK);
	font-weight: normal;
	margin-bottom: 1rem;
}

.alumni-card {
	position: relative;
	color: var(--textWhite);
}

.alumni-card .button {
	font-size: 0.7rem;
}

.alumni-name {
	font-size: var(--fontSizeMedium);
	text-transform: uppercase;
}

.alumni-details {
	position: absolute;
	height: 100%;
	top: 0;
	padding: 1rem;
	opacity: 0;
	text-shadow: 2px 2px 5px #00000073;
}

.alumni-card:hover .alumni-details {
	opacity: 1;
	transition-duration: var(--speedFast);
}

.alumni-card:hover .img-container img {
	transition: 300ms;
	filter: blur(2px);
}

.alumni-details-bg {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transform: translateY(-10px);
	z-index: 1;
}

.alumni-card:hover .alumni-details-bg {
	transition: var(--speedFast);
	opacity: 1;
	transform: translateY(0);
}

.panel-card .img-container {
	position: relative;
}

.panel-card .img-container::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0.2;
	background-color: #1f1d73c4;
	top: 0;
}

.panel-card[data-odd="true"]:nth-child(odd) .img-container::after,
.panel-card[data-odd="false"]:nth-child(even) .img-container::after {
	background-color: #d94c2b8a;
}

.alumni-card[data-odd="false"]:nth-child(odd)::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0.2;
	background-color: #d94c2b8a;
	top: 0;
}

.alumni-card[data-odd="true"]:nth-child(even)::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0.2;
	background-color: #d94c2b8a;
	top: 0;
}

/* .alumni-card:nth-child(1)::after,
.alumni-card:nth-child(3)::after,
.alumni-card:nth-child(6)::after,
.alumni-card:nth-child(8)::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0.2;
	background-color: #ac6746c2;
	top: 0;
} */

@media only screen and (min-width: 300px) and (max-width: 910px) {
	.panel-card .img-container::after {
		background-color: #1f1d73c4 !important;
	}

	.panel-card:nth-child(odd) ::after {
		background-color: #d94c2b8a !important;
	}

	/* .panel-card:nth-child(1) .img-container::after,
	.panel-card:nth-child(4) .img-container::after,
	.panel-card:nth-child(5) .img-container::after,
	.panel-card:nth-child(8) .img-container::after,
	.panel-card:nth-child(9) .img-container::after,
	.panel-card:nth-child(12) .img-container::after {
		background-color: #d94c2b8a !important;
	} */

	/* .panel-card:nth-child(3n) .img-container::after {
		background-color: #d94c2b8a !important;
	} */

	/* .panel-card[data-odd="true"]:nth-child(even) .img-container::after {
		background-color: #1f1d73c4 !important;
	}

	.panel-card[data-odd="true"]:nth-child(odd) .img-container::after {
		background-color: #d94c2b8a !important;
	} */

	/* Alumni */

	.alumni .grid {
		grid-template-columns: 1fr;
		height: 40vh;
		overflow: scroll;
	}

	.alumni-card {
		display: flex;
	}

	.alumni-details-bg.absolute {
		position: relative;
		opacity: 1;
		transform: translateY(0);
	}

	.alumni-details:not(.exclude) {
		height: 50%;
		top: 50%;
		translate: 0 -50%;
	}

	.alumni-details {
		opacity: 1;
	}

	.alumni .flex-col {
		justify-content: flex-start;
	}

	img.flag {
		width: 15px;
		height: 15px;
		display: none;
	}

	.alumni-name {
		font-size: calc(var(--fontSizeMedium) - 8px);
	}

	.alumni h3,
	.alumni h2 {
		font-size: calc(var(--fontSizeOK) - 6px);
		margin: 0.2rem 0;
		line-height: normal;
	}

	.alumni-card .button {
		font-size: 0.5rem;
	}

	.alumni-card a {
		position: absolute;
		bottom: 5%;
		left: inherit;
	}

	.alumni-card a.relative {
		position: relative;
	}

	.alumni-card[data-odd="false"]:nth-child(odd)::after {
		background-color: #ac6746c2;
	}

	.alumni-card[data-odd="true"]:nth-child(even)::after {
		background-color: unset;
	}

	.alumni-card[data-odd="true"]:nth-child(odd)::after {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		opacity: 0.2;
		background-color: #ac6746c2;
		top: 0;
	}
}

@media only screen and (min-width: 768px) and (max-width: 909px) {
	.alumni-card .button {
		font-size: 0.8rem;
	}
}

@media only screen and (min-width: 300px) and (max-width: 500px) {
	.alumni-details:not(.exclude) {
		height: 100%;
	}
}