.bg-logo {
	/* background-color: var(--bg-logo); */
	background-color: #E0E0E0;
	color: var(--bg-logo);
}

.hero-text {
	top: 0;
	bottom: 0;
	margin: auto;
	color: #fff;
	height: fit-content;
	left: 10%;
	z-index: 1;
	text-shadow: 5px 0px 5px rgba(0, 0, 0, 0.6);
	padding-top: 3rem;
	padding-bottom: 1rem;
}
.hero-text > .flex-col {
	align-items: center;
}

.hero-text h5 {
	font-size: 3rem;
	margin: unset;
	line-height: 1;
}

.hero-text-narrow {
	width: 15rem;
	font-size: 1.2rem;
	letter-spacing: 3px;
}

.hidden {
	visibility: hidden;
}

.toa {
	width: 650px;
	left: 50%;
	translate: -50% 0;
}

.hero-text .img-container img {
	max-width: unset;
}

.hero-text .lower,
.hero-text .upper {
	position: absolute;
	left: 50%;
	translate: -50% 0;
	height: 30%;
	width: 100%;
	border-left: 12px solid var(--bg-logo);
	border-right: 12px solid var(--bg-logo);
	pointer-events: none;
}

.hero-text .upper {
	top: 0;
	border-top: 12px solid var(--bg-logo);
}

.hero-text .lower {
	bottom: 0;
	border-bottom: 12px solid var(--bg-logo);
}

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

.grid-6 {
	grid-template-columns: repeat(6, 1fr);
}

.card .img-container {
	margin-bottom: 0.5rem;
}

.grid-2o8 {
	display: grid;
	grid-template-columns: 0.2fr 0.8fr;
}

.gap-sp1 {
	gap: 5rem;
}

.card-small {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	transition: 500ms;
}

/* .card-small img{
	max-width: 260px;
	margin-left: auto;
} */

.card-small h3,
.card-small h4,
.card-small p {
	color: #000000;
	font-weight: 400;
}

.card-small h3 {
	color: #000000;
	margin: unset;
	font-weight: 700;
}
.card-small h4 {
	color:#000000;
	margin: unset;
	font-weight: 500;
}

#moreLec {
	display: none;
}

@media only screen and (min-width: 911px) and (max-width: 1399px) {
	.grid-6 {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* @media only screen and (min-width: 350px) and (max-width: 910px) */
@media only screen and (min-width: 350px) and (max-width: 910px) {
	* {
		max-width: 100%;
	}

	html {
		font-size: 80%;
	}

	.hero-text {
		left: 0;
		right: 0;
		max-width: 90vw;
	}

	.hero-text .img-container img {
		max-width: 100vw;
	}

	.grid-6,
	.grid-4,
	.grid-2o8 {
		grid-template-columns: 1fr;
	}

	/* Lecturers */
	.grid-6 {
		gap: 0;
	}

	.card-small {
		align-items: center;
	}

	.card-small img{
		max-width: 260px;
		margin-left: auto;
	}

	.card-small .img-container{
		margin: 0 15rem 0 4rem;
	}

	.card-small:not(.cont):not(:first-of-type) {
		margin-top: 1rem;
	}

	.expand .card-small.cont {
		margin-top: 1rem;
	}

	.card-small.cont {
		visibility: hidden;
		max-height: 0;
	}

	.expand .card-small.cont {
		visibility: visible;
		max-height: 100vh;
	}

	#moreLec {
		display: block;
	}

	#moreLec::after {
		content: "View More";
	}

	.expand #moreLec::after {
		content: "View Less";
	}

	#moreLec {
		margin-top: 2rem;
	}

	/*  */

	.grid-2o8 > * {
		width: 80vw;
	}

	.container-m {
		width: 100%;
		padding: unset;
	}
}