.tl-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 240px));
	gap: var(--tl-gap, 16px);
	align-items: stretch;
	max-width: 1100px;
	margin: 0 auto;
	border: none !important;
	box-shadow: none !important;
	justify-content: center;
	justify-items: center;
}

.tl-section {
	margin-bottom: 20px;
	border: none !important;
	box-shadow: none !important;
}

@media (max-width: 1024px) {
	.tl-grid {
		grid-template-columns: repeat(var(--tl-cols-tablet, 2), minmax(0,1fr));
	}
}
@media (max-width: 700px) {
	.tl-grid {
		grid-template-columns: repeat(var(--tl-cols-mobile, 1), minmax(0,1fr));
	}
}

.tl-grid.tl-single {
	grid-template-columns: 1fr;
	justify-items: center;
	border: none !important;
	box-shadow: none !important;
}

.tl-heading {
	text-align: center;
	margin: 0 0 16px 0;
	font-size: var(--tl-heading-size, 22px);
	font-weight: 800;
	color: var(--tl-heading-color, #222222);
}

.tl-card {
	background: var(--tl-card-bg, #ffffff);
	border: var(--tl-card-border-width, 1px) solid var(--tl-card-border, #e5e5e5);
	border-radius: var(--tl-card-radius, 12px);
	padding: 18px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: var(--tl-text-align, center);
	box-shadow: 0 8px 20px rgba(0,0,0,0.08);
	gap: 10px;
	width: 100%;
	max-width: 240px;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.tl-card:hover {
	transform: scale(1.02);
	box-shadow: 0 12px 26px rgba(0,0,0,0.12);
}

.tl-avatar {
	width: 140px;
	height: 140px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	border: var(--tl-img-border-width, 2px) solid var(--tl-img-border, #f9a55a);
	box-shadow: 0 6px 14px rgba(0,0,0,0.10);
}

.tl-text {
	width: 100%;
}

.tl-name {
	margin: 0 0 4px 0;
	color: var(--tl-name-color, #222222);
	font-size: var(--tl-name-size, 18px);
	font-weight: 800;
	line-height: 1.2;
}

.tl-role {
	margin: 0;
	color: var(--tl-role-color, #444444);
	font-size: var(--tl-role-size, 15px);
	font-weight: 700;
}

.tl-cats {
	margin: 4px 0 0 0;
	color: var(--tl-role-color, #444444);
	font-size: calc(var(--tl-role-size, 15px) - 1px);
	font-weight: 600;
}

.tl-tagline {
	margin: 4px 0 0 0;
	color: var(--tl-tagline-color, #666666);
	font-size: var(--tl-tagline-size, 14px);
	line-height: 1.4;
	font-weight: 700;
}