.bazinga-social-proof {

    padding: 20px 0;
    background: var(--bazinga-dark);

}

.social-proof-header {

    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 18px;
    gap: 40px;

}

.eyebrow {

    display: inline-block;
    color: var(--bazinga-gold);
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 12px;
    text-transform: uppercase;
    font-size: 13px;

}

.social-proof-header h2 {

    color: var(--bazinga-light);
    font-family: var(--header-font);
    font-size: var(--h2-size);
    text-transform: uppercase;
    line-height: .9;

}

.community {

    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--bazinga-light);
    font-size: 18px;

}

.community .rating {

    color: var(--bazinga-gold);
    font-size: 24px;

}

.social-grid {

    display: grid;

    grid-template-columns:
        1.3fr 1fr 1.2fr 1fr;

    grid-auto-rows: 260px;

    gap: 24px;

}

.social-card {

    overflow: hidden;
    border-radius: 24px;
    background: var(--bazinga-medium-surface);
    position: relative;

    border: 1px solid var(--bazinga-border-color);

}

.social-card img {

    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .4s;

}

.social-card:hover img {

    transform: scale(1.05);

}

.social-card.large {

    grid-row: span 2;

}

.social-card.tall {

    grid-row: span 2;

}

.social-card.quote {

    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px;

    background: linear-gradient(145deg,
            var(--bazinga-medium-surface),
            var(--bazinga-dark-surface));

}

.social-card.quote.purple {

    background: linear-gradient(135deg,
            var(--bazinga-purple),
            var(--bazinga-electric-purple));

}

.social-card.quote .stars {

    color: var(--bazinga-gold);
    font-size: 24px;
    margin-bottom: 25px;

}

.social-card.quote p {

    color: white;
    font-size: 22px;
    line-height: 1.4;
    margin-bottom: 30px;

}

.social-card.quote strong {

    color: var(--bazinga-gold);

}

.social-card .overlay {

    position: absolute;
    left: 20px;
    bottom: 20px;

    background: rgba(23, 23, 23, .75);

    backdrop-filter: blur(18px);

    padding: 14px 22px;

    border-radius: 100px;

    color: white;

    font-weight: 700;

    border: 1px solid rgba(255, 255, 255, .1);

}

.social-card::after {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(transparent,
            rgba(0, 0, 0, .45));

    pointer-events: none;

}

.social-card.quote::after {

    display: none;

}

@media(max-width:1000px) {

    .social-grid {

        grid-template-columns: 1fr;

        grid-auto-rows: 280px;

    }

    .social-card.large,
    .social-card.tall {

        grid-row: auto;

    }

    .social-proof-header {

        flex-direction: column;
        align-items: flex-start;

    }

}