#section-sponsors {
    display: flex;
    align-items: center;
    gap: 40px;
    text-align: center;
    background-image: url(../../images-event/bg/32.jpg);
    z-index: 999;
}

.sponsor-tier {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 30px;
    margin: auto;
    text-align: center;
    transition: transform 0.3s ease-in;
    z-index: 1;
}

.sponsor {
    --cut: 0.1em;
    --active: 0;
    --x: 50%;
    --y: 50%;
    --angle: 45deg;
    --bg: radial-gradient(
            circle at var(--x) var(--y),
            hsl(0, 0%, 60%),
            transparent
        ),
        radial-gradient(
            circle at var(--x) var(--y),
            hsl(0, 0%, 80%),
            transparent
        ),
        linear-gradient(var(--angle), hsl(0, 0%, 92.9%), hsl(0, 0%, 74.1%));
    background: transparent;
    width: 200px !important;
    height: 120px !important;
    object-fit: contain;
    transition: transform 0.3s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    white-space: nowrap;
    position: relative;
    box-shadow: 0 0 calc(var(--active) * 6em) calc(var(--active) * 3em)
            hsl(0 0% 74.1% / 0.75),
        0 0 0 0
            hsl(0 calc(var(--active) * 97%) calc((var(--active) * 50%) + 30%)),
        0 0 0 0 hsl(0 calc(var(--active) * 97%) calc(var(--active) * 60%));
    transition: box-shadow 0.1s ease-in, scale 0.2s ease-in,
        background 0.1s ease-in, opacity 0.2s ease-in;
    border-radius: 10px;
    scale: calc(1 + (var(--active) * 0.1));
    opacity: 0.8;
}

.sponsor:active {
    scale: 1;
}

.sponsor:hover {
    --active: 1;
    background: var(--bg);
    opacity: 1;
    transform: scale(1.05);
}

/* Ensure the sponsor logos are aligned horizontally */
.logo-gold,
.logo-silver,
.logo-bronze {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.sparkle-button {
    display: inline-block;
    margin: 15px;
}

/* Media Query for smaller screens (384px and below) */
@media (max-width: 384px) {
    .sponsor-tier {
        gap: 10px;
        padding: 15px;
    }

    .sponsor {
        flex: 1 1 100%; /* Make each sponsor take up the full width of the container */
        max-width: 100%; /* Ensure max-width is adjusted accordingly */
        margin: 10px 0; /* Adjusted margin */
    }
}