docs: fix Starter Kit spotlight card on mobile

[bharvey88]

Summary

• Wraps the desktop .apollo-esk-img overrides in @media (min-width: 701px) so they no longer compete with the mobile media query and stop the spotlight card from rendering with a desktop-sized image on phones.
• Adds explicit resets for transform, border-radius, and object-fit inside the existing mobile media query so the stacked banner image renders cleanly under 700px.

Test plan

• Verify on local mkdocs serve at narrow widths that the image stacks below the text as a 200px banner
• Verify on a real phone that subhead + CTA are visible and the image isn't oversized

Summary by CodeRabbit

• Style
  • Enhanced responsive styling to improve image display consistency across different screen sizes.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 391f921e-4d25-408c-ab99-b713b4ecf6a6

📥 Commits

Reviewing files that changed from the base of the PR and between d49bbd5 and 52d600e.

📒 Files selected for processing (1)

• docs/index.md

---

Walkthrough

Updated inline CSS styling for the .apollo-esk-img element across responsive breakpoints. Desktop media query rules are reformatted while preserving layout properties. Mobile media query rules explicitly enforce transform: none !important, border-radius, and object-fit to improve small-screen rendering consistency.

Changes

Responsive image styling refinement

Layer / File(s)	Summary
Responsive image media queries docs/index.md	Desktop media query formatting is reorganized without functional change. Mobile media query (max-width: 700px) adds explicit transform: none !important and reinforces border-radius and object-fit properties for consistent small-screen image display.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

• ApolloAutomation/docs#849: Modifies the same .apollo-esk-img CSS styling in docs/index.md with overlapping small-screen transform, border-radius, and object-fit adjustments.

Poem

🐰 A fluffy image sits so tall,
On desktop wide, on mobile small,
With transform: none and curves so true,
The Apollo folk made styling new! 🎨

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch docs-spotlight-card-mobile-fix

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}