From 52d600e64d9183016ca1a9c6554cbdb48ac85fd6 Mon Sep 17 00:00:00 2001
From: Brandon Harvey <8107750+bharvey88@users.noreply.github.com>
Date: Fri, 22 May 2026 12:43:22 -0500
Subject: [PATCH] docs: fix Starter Kit spotlight card on mobile

Wrap desktop image overrides in @media (min-width: 701px) so they stop fighting the mobile media query. Also explicitly reset transform/border-radius/object-fit in the mobile block so the stacked banner image renders cleanly.
---
 docs/index.md | 27 ++++++++++++++++-----------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/docs/index.md b/docs/index.md
index 80a7e1be20..edf40c9852 100755
--- a/docs/index.md
+++ b/docs/index.md
@@ -11,17 +11,19 @@ description: >-
     Your go-to resource for setup guides, troubleshooting, and tips for every Apollo device. Found an error or need help? [Open a GitHub issue](https://github.com/ApolloAutomation/docs/issues), hop into our [Discord](https://link.apolloautomation.com/discord), post on our [Community Forum](https://forum.apolloautomation.com/), or email [support@apolloautomation.com](mailto:support@apolloautomation.com).
 
 <style>
-  .apollo-esk-img {
-    position: absolute !important;
-    top: 50% !important;
-    right: 28px !important;
-    transform: translateY(-50%) !important;
-    width: 280px !important;
-    height: 212px !important;
-    object-fit: cover !important;
-    border-radius: 12px !important;
-    display: block !important;
-    max-width: none !important;
+  @media (min-width: 701px) {
+    .apollo-esk-img {
+      position: absolute !important;
+      top: 50% !important;
+      right: 28px !important;
+      transform: translateY(-50%) !important;
+      width: 280px !important;
+      height: 212px !important;
+      object-fit: cover !important;
+      border-radius: 12px !important;
+      display: block !important;
+      max-width: none !important;
+    }
   }
   @media (max-width: 700px) {
     .apollo-esk-card { min-height: 0 !important; padding: 24px !important; }
@@ -32,6 +34,9 @@ description: >-
       width: 100% !important;
       height: 200px !important;
       margin-top: 20px !important;
+      transform: none !important;
+      border-radius: 12px !important;
+      object-fit: cover !important;
       display: block !important;
     }
   }