#champions[data-recent].champions-section{padding-top:56px;padding-bottom:64px}
#champions[data-recent] .eyebrow{margin-bottom:14px}
#champions[data-recent] .champ-intro{margin-bottom:24px}
#champions .champ-spot{margin:0 0 28px;padding:16px;border:1px solid #4d5348;border-top:3px solid var(--y);background:linear-gradient(160deg,rgba(255,214,10,.10),rgba(255,214,10,.02) 55%),#161b19}
#champions .champ-spot-kicker{margin:0 0 12px;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--y)}
#champions .champ-spot-kicker span{color:#c7c9c4;letter-spacing:.11em}
#champions .champ-spot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
#champions .champ-spot-card{display:flex;flex-direction:column;background:#101312;border:1px solid #3a403b;color:#fff;text-decoration:none;overflow:hidden}
#champions .champ-spot-img{background:linear-gradient(160deg,#26302a,#161b19);display:flex;align-items:center;justify-content:center}
#champions .champ-spot-img img{display:block;width:100%;height:auto;max-height:46vh;object-fit:contain}
#champions .champ-spot-cap{padding:12px 16px 14px;border-top:3px solid var(--y)}
#champions .champ-spot-div{display:block;color:var(--y);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
#champions .champ-spot-cap strong{display:block;font-family:var(--display);font-size:clamp(34px,3.8vw,54px);line-height:.95;text-transform:uppercase;letter-spacing:-.005em;margin:6px 0 10px}
#champions .champ-spot-link{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #5a615b;padding-top:9px;text-transform:uppercase;font-size:10px;font-weight:800;letter-spacing:.09em}
#champions .champ-spot-link span{color:var(--y);font-size:18px;line-height:.65}
#champions .champ-spot-card:hover .champ-spot-link{color:var(--y)}
#champions .champ-team{display:block;color:var(--y);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-top:10px}
@media(max-width:760px){#champions[data-recent].champions-section{padding-top:40px;padding-bottom:52px}#champions[data-recent] .champ-intro{margin-bottom:18px}#champions .champ-spot{padding:12px 12px 14px;margin-bottom:22px}#champions .champ-spot-grid{grid-template-columns:1fr;gap:12px}#champions .champ-spot-img img{max-height:42vh}#champions .champ-spot-cap{padding:12px 14px 14px}#champions .champ-spot-cap strong{font-size:clamp(34px,10vw,46px)}}

/* v4: crop the spotlight photos to a landscape frame, closer on the players */
#champions .champ-spot-img{aspect-ratio:16/10;overflow:hidden;display:block}
#champions .champ-spot-img img{width:100%;height:100%;max-height:none;object-fit:cover;object-position:center 38%;transform:scale(1.14);transform-origin:center 38%}
@media(max-width:760px){#champions .champ-spot-img{aspect-ratio:4/3}#champions .champ-spot-img img{max-height:none}}

/* v5: wider frame; men's photo framed lower down so the bottom row shows; women's photo uncropped at the sides */
#champions .champ-spot-img{aspect-ratio:3/2}
#champions .champ-spot-grid>.champ-spot-card:nth-child(1) .champ-spot-img img{transform:scale(1.04);transform-origin:center 80%;object-position:center 80%}
#champions .champ-spot-grid>.champ-spot-card:nth-child(2) .champ-spot-img img{transform:none;object-position:center 42%}
@media(max-width:760px){#champions .champ-spot-img{aspect-ratio:4/3}}

/* v6: men's photo is a tall photo; use a taller frame framed from the top so heads and the kneeling row both fit */
#champions .champ-spot-grid{align-items:start}
#champions .champ-spot-grid>.champ-spot-card:nth-child(1) .champ-spot-img{aspect-ratio:5/6}
#champions .champ-spot-grid>.champ-spot-card:nth-child(1) .champ-spot-img img{transform:none;object-position:center 20%}
@media(max-width:760px){#champions .champ-spot-grid>.champ-spot-card:nth-child(1) .champ-spot-img{aspect-ratio:5/6}}

/* v7: men's frame matches the women's box height; crop from just above the heads to the feet (no tall box) */
#champions .champ-spot-grid{align-items:start;grid-template-columns:minmax(0,.71fr) minmax(0,1fr)}
#champions .champ-spot-grid>.champ-spot-card:nth-child(1) .champ-spot-img{aspect-ratio:16/15}
#champions .champ-spot-grid>.champ-spot-card:nth-child(1) .champ-spot-img img{transform:none;object-position:center 64%}
@media(max-width:760px){#champions .champ-spot-grid{grid-template-columns:1fr}#champions .champ-spot-grid>.champ-spot-card:nth-child(1) .champ-spot-img{aspect-ratio:4/3}#champions .champ-spot-grid>.champ-spot-card:nth-child(1) .champ-spot-img img{object-position:center 66%}}
