reference plugin and image gen analysis

igny8-ai-seo-wp-plugin/assets/css/image-injection.css

@@ -0,0 +1,51 @@
+/**
+ * Igny8 Image Injection CSS
+ * 
+ * Responsive image display styles for marker-based image injection
+ * 
+ * @package Igny8
+ * @version 1.0.0
+ */
+
+/* Desktop and larger screens (769px+) */
+@media (min-width: 769px) {
+  .igny8-article-image-desktop { 
+    display: block !important; 
+  }
+  .igny8-article-image-mobile { 
+    display: none !important; 
+  }
+}
+
+/* Mobile and smaller screens (768px and below) */
+@media (max-width: 768px) {
+  .igny8-article-image-desktop { 
+    display: none !important; 
+  }
+  .igny8-article-image-mobile { 
+    display: block !important; 
+  }
+}
+
+/* Image wrapper styling */
+.igny8-image-wrapper {
+  margin: 20px 0;
+  text-align: center;
+}
+
+.igny8-image-wrapper img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* Loading state */
+.igny8-image-wrapper img[loading="lazy"] {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.igny8-image-wrapper img[loading="lazy"].loaded {
+  opacity: 1;
+}