/* 1. The Container */
 .logo-grid {
     display: grid;
     gap: 2rem;
    /* Space between logos */
     align-items: center;
    /* Vertically center logos */
     justify-items: center;
    /* Horizontally center logos */
    /* This creates a responsive grid that wraps automatically */
     grid-template-columns: repeat(auto-fit, minmax(var(--min-col-width, 150px), 1fr));
}
/* Single logo alignment override */
.logo-grid.single-logo {
    justify-content: start;
    grid-template-columns: auto;
}
/* 2. The Item Wrapper - Forces a consistent height context */
 .logo-item {
     width: 100%;
     height: var(--logo-height, 100px);
    /* Default height */
     display: flex;
     justify-content: center;
     align-items: center;
}
/* Fix for anchor tags to respect container height */
 .logo-item a {
     display: flex;
     width: 100%;
     height: 100%;
     justify-content: center;
     align-items: center;
}
/* 3. The Magic Image Fix */
 .logo-item img {
     max-width: 100%;
     max-height: 100%;
     width: auto;
     height: auto;
     object-fit: contain;
    /* Prevents stretching/cropping! */
}
/* 4. Tier Sizing Modifiers */
 .tier-small {
     --logo-height: 60px;
     --min-col-width: 100px;
}
 .tier-medium {
     --logo-height: 100px;
     --min-col-width: 150px;
}
 .tier-large {
     --logo-height: 150px;
     --min-col-width: 250px;
}

/* 5. Visual Separation for Stacked Tiers */
.sponsor-tier {
    padding: 2rem 0;
    border-bottom: 1px solid #e6e6e6; /* Light gray divider */
}

.sponsor-tier:last-child {
    border-bottom: none;
}

.tier-heading {
    margin-bottom: 1.5rem;
    color: #444; /* Dark gray for better contrast */
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.05em;
}