#social-proof {
    background-color: var(--color-bg);
}
.social-proof-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-lg);
}
.social-proof-desktop-wrapper {
    display: contents;
}
.social-proof-heading {
    width: 100%;
    text-align: center;

    font-family: var(--font-family);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-xl);
    color: var(--color-text);
}
.social-proof-carousel-wrapper {
    width: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-md);
}

/*=====[CONTENT]=====*/
.social-proof-carousel-mask {
    width: 100%;
    overflow: hidden;
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;

    border: var(--border);
    border-radius: var(--radius-lg);
}
.social-proof-carousel-content {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;

    will-change: transform;
    transition: transform 0.35s ease-out;
}
.social-proof-carousel-item {
    position: relative;

    min-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-lg);

    background-color: var(--color-bg);
    padding: var(--space-lg) var(--space-md);

    touch-action: pan-y;
    user-select: none;
}
.social-proof-image {
    width: 60%;
    max-width: 350px;
    aspect-ratio:  1 / 1;

    object-fit: cover;
    object-position: center;

    border: none;
    border-radius: var(--radius-xl);

    user-select: none;
}
.social-proof-message {
    width: 90%;
    text-align: justify;

    font-family: var(--font-family);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-lg);
    color: var(--color-text);

    user-select: none;
}
.social-proof-name {
    width: 90%;
    text-align: center;

    font-family: var(--font-family);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-md);
    color: var(--color-text);

    user-select: none;
}

/*=====[CONTROLS]=====*/
.social-proof-carousel-controls-mask {
    width: calc(5 * var(--carousel-dot-slot-size)); /* 5 SLOTS */
    display: flex;
    justify-content: flex-start;
    align-items: center;

    overflow: hidden;
}
.social-proof-carousel-controls {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    transition: transform 0.35s ease-out;
}
.carousel-dot-slot {
    width: var(--carousel-dot-slot-size);
    height: var(--carousel-dot-slot-size);
    display: flex;
    justify-content: center;
    align-items: center;
    
    flex-shrink: 0;
}
.carousel-dot {
    width: var(--carousel-dot-size);
    height: var(--carousel-dot-size);
    background-color: var(--color-bg-muted);
    border: none;
    border-radius: 50%;

    transition: transform 0.25s ease;

    cursor: pointer;
}
.carousel-dot-active {
    transform: scale(var(--carousel-scale-lg));
    background-color: var(--color-primary);
}
.carousel-dot-medium {
    transform: scale(var(--carousel-scale-md));
}
.carousel-dot-small {
    transform: scale(var(--carousel-scale-sm));
    opacity: 0.6;
}

/*=====[BUTTONS]=====*/
.social-proof-carousel-prev-button,
.social-proof-carousel-next-button {
    color: var(--color-border);
    font-size: calc(var(--font-size-lg) * 1.2);

    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    cursor: pointer;

    display: none;
}
.social-proof-carousel-prev-button {
    left: var(--space-sm);
}
.social-proof-carousel-next-button {
    right: var(--space-sm);
}

/*=====[MEDIA QUERIES]=====*/
@media (min-width: 1024px) {
    .social-proof-carousel-item {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: var(--space-lg);
    }
    .social-proof-image {
        max-width: none;
        width: 30%;
    }
    .social-proof-desktop-wrapper {
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--space-lg);
    }
    .social-proof-carousel-prev-button,
    .social-proof-carousel-next-button {
        display: block;
    }
    .social-proof-carousel-button-hidden {
        display: none;
    }
}