/* Dedicated, isolated hero ball renders. */
.ball.base { content: url('baseball-realistic.png'); object-position: center; }
.ball.tennis { content: url('tennis-realistic.png'); object-position: center; }
.ball.foot { content: url('football-realistic.png'); object-position: center; }
/* Keep the wide football render secondary to the basketball in the hero. */
.ball.foot { width: 29%; left: 35%; bottom: 4%; }
/* Full football silhouette stays inside the hero viewport. */
.ball.foot { width: 25%; left: 37%; bottom: 9%; }
.ball.foot { aspect-ratio: 3 / 2; object-fit: contain; }