.page-template-sponsors .sponsors {
    align-items: center;
}

.page-template-sponsors .sponsors section,
.neighborhood .sponsors section {
    display:  flex;
    --gap: 30px;
    gap: var(--gap);
    margin: 38px 0 58px;
    flex-wrap: wrap;
    justify-content: center;

}
.page-template-sponsors .sponsors section .sponsor,
.neighborhood .sponsors section .sponsor {
    width: calc( (970px - (var(--gap) * ( var(--count) - 1 )) - 106px ) / var(--count) );
}

.page-template-sponsors .sponsors section.tier-0,
.page-template-sponsors .sponsors section.tier-1,
.neighborhood .sponsors section.tier-0,
.neighborhood .sponsors section.tier-1 {
    --count: 3;
}

.page-template-sponsors .sponsors section.tier-2,
.neighborhood .sponsors section.tier-2 {
    --count: 4;
}

.page-template-sponsors .sponsors section.tier-3,
.neighborhood .sponsors section.tier-3 {
    --count: 6;
}

.page-template-sponsors .sponsors .sponsor,
.neighborhood .sponsors .sponsor {
    display: flex;
    justify-content: center;
    aspect-ratio: 1 / 1;
}

.page-template-sponsors .sponsors .sponsor img,
.neighborhood .sponsors .sponsor img {
    width: 100%;
    object-fit: contain;
}


.page-template-sponsors h3 {
    font-size: 40px;
}

.page-template-sponsors .frame_middle {
    overflow: hidden;
}
.page-template-sponsors .sponsors h3,
.neighborhood .sponsors h3 {
    color: var(--palette-grey);
    text-align: center;
    margin: 0 30px;
    font-size: 40px;
}

@media (max-width: 480px) {
    .page-template-sponsors .sponsors section,
    .neighborhood .sponsors section {
        --gap: 23px;
        width: 100vw;
    }
    .page-template-sponsors .sponsors section .sponsor,
    .neighborhood .sponsors section .sponsor {
        width: calc( (100vw - (var(--gap) * ( var(--count) - 1 )) -  60px ) / var(--count) ) !important;
    }

    .page-template-sponsors .sponsors section.tier-0,
    .neighborhood .sponsors section.tier-0,
    .page-template-sponsors .sponsors section.tier-1,
    .neighborhood .sponsors section.tier-1 {
        --count: 1;
    }

    .page-template-sponsors .sponsors section.tier-2,
    .neighborhood .sponsors section.tier-2 {
        --count: 2;
    }

    .page-template-sponsors .sponsors section.tier-3,
    .neighborhood .sponsors section.tier-3 {
        --count: 3;
    }
}

/* Sponsors Page */
.page-template-sponsors {
    --palette-pink      : #ED2A79;
    --palette-yellow    : #EFE121;
    --palette-green     : #027C3F;
    --palette-grey      : #979797;
    background-color: white;
}

.page-template-sponsors .frame_middle {
    position: relative;
}
.page-template-sponsors h2,
.page-template-sponsors h3 {
    font-family: 'Pickathon';
}

.page-template-sponsors .pink-banner {
    position: relative;
    overflow: hidden;
    --h: calc( min( 8vw, 0.08 * 970px ));
    height: var(--h);
    --angle: 2deg;
    --sin: calc( sin( var(--angle) ) );
    --cos: calc( cos( var(--angle) ) );
    /* sin(2deg), cos(2deg) */
    --sin: 0.3490;
    --cos: 0.9994;
    margin-bottom: 2em;
}
.page-template-sponsors .pink-banner::after {
    --height: calc( var(--h) * var(--cos) );
    --dx:     calc( var(--h) * var(--sin) );
    content: "";
    background: var(--palette-pink);
    position: absolute;
    top: 0;
    right: 0;
    width: 110%;
    height: var(--height);
    transform: rotate( var(--angle) ) translate(var(--dx), 0) ;
    transform-origin: top right;
}

.page-template-sponsors .content {
    display: flex;
    gap: 2em;
    margin: 2em;
    max-width: 970px;
    margin: auto;
    padding: 2em;
}

.page-template-sponsors .content > * {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.page-template-sponsors .content h2 {
    display: inline-block;
    color: var(--palette-green );
    font-size: 48px;
    margin: 0;
}

.page-template-sponsors .title {
    text-align: center;
    position: relative;
    --angle: -2deg;
    padding: 1px 0;
    color: var(--palette-pink);
}

.page-template-sponsors .title::after {
    content: "";
    position: absolute;
    top: 0;
    left: -15px;
    right: -15px;
    height: 100%;
    z-index: -1;
    background: var(--palette-yellow);
    transform: rotate( var(--angle) );
}

.page-template-sponsors .sponsors {
    display: flex;
    flex-direction: column;
    margin-top: 58px;
}

@media (max-width: 480px) {
    .page-template-sponsors .content {
        flex-wrap: wrap;
    }
    .page-template-sponsors .content > * {
        min-width: calc( 100vw - 30px * 2 )
    }
}