diff --git a/css/custom.css b/css/custom.css index 332ad98..673317f 100644 --- a/css/custom.css +++ b/css/custom.css @@ -139,6 +139,86 @@ img, picture, video, canvas, svg{ height: auto; } +/* ========================================= + SPONSOR SECTION - CRITICAL FIXES + ========================================= */ + +/* Responsive sponsor images */ +.responsive-sponsor-img { + width: 100%; + height: auto; + max-width: 400px; + aspect-ratio: 1 / 1; + object-fit: contain; + display: block; +} + +/* Sponsor logo grid - replaces slider with responsive grid */ +.sponsor-logo-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + gap: clamp(16px, 4vw, 24px); + padding: var(--space-8) 0; + max-width: 1200px; + margin: 0 auto; +} + +.sponsor-logo-item { + position: relative; + aspect-ratio: 16 / 9; + display: flex; + align-items: center; + justify-content: center; + background: var(--white-color); + border-radius: 8px; + padding: var(--space-4); + box-shadow: 0 2px 8px rgba(0,0,0,0.1); + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.sponsor-logo-item:hover { + transform: translateY(-4px); + box-shadow: 0 4px 16px rgba(0,0,0,0.15); +} + +.sponsor-logo-item img { + max-width: 100%; + max-height: 100%; + object-fit: contain; + filter: grayscale(100%); + opacity: 0.7; + transition: all 0.3s ease; +} + +.sponsor-logo-item img:hover { + filter: grayscale(0%); + opacity: 1; +} + +/* Mobile sponsorship fixes */ +@media (max-width: 768px) { + .sponsor-logo-grid { + grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); + gap: clamp(12px, 3vw, 16px); + } + + .sponsor-logo-item { + aspect-ratio: 4 / 3; + } +} + +/* Small mobile */ +@media (max-width: 480px) { + .sponsor-logo-grid { + grid-template-columns: repeat(2, 1fr); + } + + .sponsor-logo-item { + aspect-ratio: 1 / 1; + padding: var(--space-2); + } +} + a{ text-decoration: none; } diff --git a/index.html b/index.html index 9bfdb0f..2f74fd4 100644 --- a/index.html +++ b/index.html @@ -493,7 +493,7 @@
- +