/**
 * Section 7: Track data — Figma desktop 4095:4812 · mobile 4104:10253
 *
 * Khung ảnh = mask 1400×909, nội dung 1400×958 → chỉ hiện 909/958 = 94.88%
 * chiều cao ảnh; phần đáy mờ dần.
 *
 * Tỉ lệ khung ở các breakpoint (mask ÷ nội dung):
 *   desktop 909 / 958    = .9488
 *   laptop  825.9 / 870.4 = .9489
 *   tablet  515.5 / 543.3 = .9488
 *   mobile  227.25 / 239.5 = .9488
 * → cùng một tỉ lệ, chỉ cần 1 công thức cho mọi breakpoint.
 */

#cr-dashboard .cr-dashboard__media {
	position: relative;
	width: 100%;
	/* khung hiển thị: 1400 × 909 */
	aspect-ratio: 1400 / 909;
	overflow: hidden;
	/* Fade đáy — Figma làm mờ dần các dòng cuối của bảng.
	   Điểm bắt đầu 72% đo theo ảnh trong screenshot Figma (3 dòng cuối nhạt dần). */
	-webkit-mask-image: linear-gradient(180deg, #000 72%, rgba(0, 0, 0, 0) 100%);
	mask-image: linear-gradient(180deg, #000 72%, rgba(0, 0, 0, 0) 100%);
}

/* Ảnh cao hơn khung → tràn xuống dưới và bị mask cắt, đúng như Figma. */
#cr-dashboard .cr-dashboard__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: auto;
}

@media (max-width: 1024px) {
	/* Section DUY NHẤT hạ description-lg xuống 16 ở mobile.
	   Figma 4104:10255: description 350×110 = 5 dòng × 16 × 1.4 (nếu là 20px thì
	   phải 6 dòng = 168). Hero và §3 vẫn giữ 20px — xem base.css. */
	#cr-dashboard .cr-description--description-lg {
		font-size: 16px;
	}
}