Fix mobile style of startup tier (#1324)

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

Author: nikoshell

src/components/sponsor-tiers/sponsor-tiers.astro

@@ -258,7 +258,7 @@ const formatPrice = (price: number | string) => {
       For early-stage companies ready to connect with the community, boost visibility, and make a strong first impression.
     </p>
   </div>
-  <div class="grid grid-cols-1 sm:grid-cols-1 gap-10 mx-96">
+  <div class="grid grid-cols-1 gap-10 md:mx-50 lg:mx-60 xl:mx-96">
     {
       tiers
         .filter((tier) => tier.title === "Startup")

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,57 @@ 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;
+  }
+}