Use full card width for panoramic CIIL banner

README.md

@@ -9,7 +9,7 @@ pinned: false
 ---
 
 <p align="center">
-  <img src="https://huggingface.co/spaces/CIIL/README/resolve/main/assets/ciil-banner.png" alt="Central Institute of Indian Languages" width="100%" />
+  <img src="https://huggingface.co/spaces/CIIL/README/resolve/main/assets/ciil-banner.png" alt="Central Institute of Indian Languages" width="100%" style="display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 4 / 1; object-fit: cover; object-position: center 46%; border-radius: 6px;" />
 </p>
 
 <h3 align="center">भारतीय भाषा संस्थान</h3>

index.html

@@ -9,8 +9,9 @@
 :root { color-scheme: light dark; --bg: #fff; --text: #28303c; --heading: #18202c; --link: #805328; --rule: #e5e7eb; --quote: #b77a35; }
 * { box-sizing: border-box; }
 body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Devanagari", sans-serif; font-size: 16px; line-height: 1.75; -webkit-font-smoothing: antialiased; }
-main { max-width: 936px; margin: 0 auto; padding: 40px 28px 48px; overflow-wrap: break-word; }
-main > p:first-child { margin: 0 0 28px; }
+main { max-width: none; margin: 0 auto; padding: 40px 28px 48px; overflow-wrap: break-word; }
+main > p.ciil-banner { margin: 0 -28px 28px; }
+main > p.ciil-banner img { aspect-ratio: 4 / 1; object-fit: cover; object-position: center 46%; }
 img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 6px; }
 h2, h3 { color: var(--heading); font-weight: 650; line-height: 1.35; }
 h2 { margin: 2.25em 0 1em; font-size: 1.55rem; letter-spacing: -0.025em; }
@@ -28,13 +29,13 @@ ul { padding-left: 1.35em; }
 li { padding-left: 0.25em; margin: 1em 0; }
 li::marker { color: var(--quote); }
 hr { border: 0; border-top: 1px solid var(--rule); margin: 32px 0 24px; }
-@media (max-width: 600px) { main { padding: 16px 20px 32px; } h2 { font-size: 1.35rem; } h3[align="center"] { font-size: 1.4rem; } blockquote { padding-left: 14px; } }
+@media (max-width: 600px) { main { padding: 16px 20px 32px; } main > p.ciil-banner { margin-left: -20px; margin-right: -20px; } h2 { font-size: 1.35rem; } h3[align="center"] { font-size: 1.4rem; } blockquote { padding-left: 14px; } }
 @media (prefers-color-scheme: dark) { :root { --bg: #0f172a; --text: #cbd5e1; --heading: #f1f5f9; --link: #dfb476; --rule: #334155; --quote: #c89653; } }
 </style>
 </head>
 <body>
 <main aria-label="Central Institute of Indian Languages organization card">
-<p align="center">
+<p class="ciil-banner" align="center">
   <img src="https://huggingface.co/spaces/CIIL/README/resolve/main/assets/ciil-banner.png" alt="Central Institute of Indian Languages" width="100%" />
 </p>
 <h3 align="center">भारतीय भाषा संस्थान</h3>