upload

Author: darjeeling

web/sponsors/index.html

@@ -164,7 +164,7 @@ <h2 class="h2 text-center mb-4">Annual Sponsors</h2>
 
               <div class="mb-5">
                 <h3 class="h4 text-center mb-4">Starter Gold Sponsor</h3>
-                <div class="row g-4">
+                <div class="row g-4 justify-content-center">
 
                     <div class="col-md-4">
                       <div class="card sponsor-card h-100">
@@ -203,7 +203,7 @@ <h4 class="h5 mb-1">Python ED</h4>
 
               <div class="mb-5">
                 <h3 class="h4 text-center mb-4">Gold Sponsor</h3>
-                <div class="row g-4">
+                <div class="row g-4 justify-content-center">
 
                     <div class="col-md-4">
                       <div class="card sponsor-card h-100">
@@ -226,7 +226,7 @@ <h4 class="h5 mb-1">Python Software Foundation</h4>
 
               <div class="mb-5">
                 <h3 class="h4 text-center mb-4">Silver Sponsor</h3>
-                <div class="row g-4">
+                <div class="row g-4 justify-content-center">
 
                     <div class="col-md-4">
                       <div class="card sponsor-card h-100">

web/static/css/pao-css-classes.css

@@ -932,8 +932,10 @@ main {
 }
 
 .sponsor-logo {
-    width: 300px;
-    height: 300px;
+    max-width: 300px;
+    width: 100%;
+    height: auto;
+    aspect-ratio: 1/1;
     border-radius: 8px;
     display: flex;
     align-items: center;
@@ -944,6 +946,14 @@ main {
     color: #6c757d;
 }
 
+.sponsor-logo img {
+    max-width: 100%;
+    max-height: 100%;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+}
+
 /* Sponsor Card - Based on Figma Design */
 .pao-sponsor-card {
   background-color: #FFFFFF;
@@ -990,35 +1000,17 @@ main {
   width: 100%;
 }
 
-/* Sponsors Container - Horizontal Scroll */
+/* Sponsors Container - Responsive Wrap */
 .pao-sponsors-row {
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
   align-items: center;
   gap: 40px;
-  overflow-x: auto;
   padding: 20px 0;
   justify-content: center;
 }
 
-.pao-sponsors-row::-webkit-scrollbar {
-  height: 8px;
-}
-
-.pao-sponsors-row::-webkit-scrollbar-track {
-  background: var(--color-cream-light);
-  border-radius: 4px;
-}
-
-.pao-sponsors-row::-webkit-scrollbar-thumb {
-  background: var(--color-navy);
-  border-radius: 4px;
-}
-
-.pao-sponsors-row::-webkit-scrollbar-thumb:hover {
-  background: var(--color-blue);
-}
-
 /* GitHub Sponsors Container Card */
 .pao-github-sponsors-card {
   background-color: #FFFFFF;