Add collapsable markdown style

Author: nikoshell

src/content/pages/sponsorship/sponsor.mdx

@@ -27,6 +27,7 @@ https://www.youtube.com/watch?v=oW8FHL4PiuI
 
 Explore the benefits of sponsoring EuroPython:
 
+<div class="md_table">
 | <IconLabel icon="users-viewfinder" title="Brand Exposure" />                                   	| <IconLabel icon="bullseye" title="Product Promotion" />                                         	| <IconLabel icon="award" title="Community Support" />                            	|
 |---------------------------------------------------------------------------------------	|-----------------------------------------------------------------------------------------------	|---------------------------------------------------------------------------------	|
 | Boost your brand and connect with **1,500 Pythonistas** at this leading Python event. 	| Showcase your product to an engaged audience and **turn visibility into high-quality leads**. 	| Build **positive brand association** and gain community respect & appreciation. 	|
@@ -35,6 +36,8 @@ Explore the benefits of sponsoring EuroPython:
 |---------------------------------------------------------------------------------------	|-----------------------------------------------------------------------------------------------	|---------------------------------------------------------------------------------	|
 | Tap into the expertise of the Python community to **upskill your team**.              	| Access **a pool of talented Python developers** looking for their next opportunity.           	| Discover new avenues and opportunities to **expand and grow your business**.    	|
 
+</div>
+
 #### Ready to Become a EuroPython 2025 Sponsor?
 <Button url="https://forms.gle/T8da5sQbKn6BFsxH7">Sign Up Now to Secure Your Spot!</Button>
 

src/styles/markdown.css

@@ -98,3 +98,58 @@ p.cross::after {
   font-size: 1.3em;
   margin-left: 0.4em;
 }
+
+.md_table {
+  border-collapse:collapse;
+  width: 100%;
+  table-layout: fixed;
+}
+@media screen and (max-width: 680px) {
+  .md_table thead {
+    border:none;
+  }
+  .md_table tr {
+    display: block;
+    margin-bottom: 0.8em;
+    border:none;
+  }
+  .md_table th {
+    margin-bottom: 0.8em;
+    border:none;
+    display: block;
+  }
+
+
+  .md_table thead th div {
+    text-align: center;
+    justify-content: center;
+  }
+
+  .md_table tr td {
+    border:none;
+    display: block;
+    text-align: left;
+    position: relative;
+    padding-inline-start:0.8em;
+  }
+  .md_table tr td:before { 
+    content: attr(data-label);
+    font-weight: bold;
+    text-transform: uppercase;
+    position: absolute;
+    left: 0;
+  }
+  .md_table tr td:last-child {
+    border-bottom: 0;
+  }
+  .md_table__thead {
+    border: none;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+  }
+}