.list-leader {display: grid;grid-template-columns: repeat(4, 1fr);gap: 40px;align-items: center;flex-wrap: wrap;}
.list-leader .item {border-radius: 12px;overflow: hidden;position: relative;}
.list-leader .item a .img-person {overflow: hidden;width: 100%;aspect-ratio: 350 / 434;position: relative;}
.list-leader .item a .img-person img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.5s ease;}
.list-leader .item a:hover .img-person img {transform: scale(1.05);}
.list-leader .item a .txt-person {position: absolute;bottom: 0;left: 0;padding: 39px 20px 24px;text-align: center;width: 100%;box-sizing: border-box;z-index: 10;}
.list-leader .item a .txt-person:before {content: "";position: absolute;background: linear-gradient(360deg, #000000 31.08%, rgba(0, 0, 0, 0) 91.62%);width: 100%;bottom: 0;left: 0;height: 100%;z-index: -1;opacity: 0.8}
.list-leader .item a .txt-person .txt {font-weight: 400;font-size: 20px;line-height: 150%;letter-spacing: -0.2px;text-align: center;color: #fff;padding: 0 0 4px;position: relative;}
.list-leader .item a .txt-person .name {font-weight: 600;font-size: 24px;line-height: 150%;text-align: center;letter-spacing: -0.2px;color: #fff;position: relative;}
.list-leader .item a .txt-person .year {font-weight: 400;font-size: 20px;line-height: 150%;letter-spacing: -0.2px;text-align: center;color: #fff;}

@media (max-width: 1200px) {
	.list-leader {grid-template-columns: repeat(3, 1fr)}
	.list-leader .item a .txt-person {padding: 20px;}
	.list-leader .item a .txt-person .txt {font-size: 16px;}
	.list-leader .item a .txt-person .name {font-size: 20px;}
	.list-leader .item a .txt-person .year {font-size: 16px;}
}

@media (max-width: 768px) {
	.list-leader {gap: 20px;grid-template-columns: repeat(2, 1fr)}
}

@media (max-width: 500px) {
	.list-leader {gap: 20px;grid-template-columns: repeat(1, 1fr)}
}