This commit is contained in:
2026-03-17 13:27:08 -05:00
parent 576b2c98f3
commit 3db7c385bd
2 changed files with 81 additions and 1 deletions

View File

@@ -139,6 +139,86 @@ img, picture, video, canvas, svg{
height: auto; 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{ a{
text-decoration: none; text-decoration: none;
} }

View File

@@ -493,7 +493,7 @@
<div class="swiper-slide"> <div class="swiper-slide">
<div class="service-slider-image"> <div class="service-slider-image">
<figure> <figure>
<img src="images/srisports.png" style="width: 1200px; height: 1200px;" alt=""> <img src="images/srisports.png" alt="" class="responsive-sponsor-img">
</figure> </figure>
</div> </div>
</div> </div>