@use '../../colors';
@use '../../breakpoints';

.bz-card-collab {
    border-radius: 0.5rem;
    border: 6px solid colors.$pink-light;
    padding: 24px; 
    background-color: white; /* Cor de fundo */
    position: relative;

    clip-path: polygon(0 0, calc(100% - 100px) 0, 100% 100px, 100% 100%, 0 100%);

    &::before {
        position: absolute;
        content: "";
        top: -6px; 
        right: -6px; 
        width: 0; 
        height: 0; 
        border-right: 100px solid transparent; 
        border-bottom: 100px solid colors.$pink-light;
        border-bottom-left-radius: 5px; 
        box-shadow: -3px 3px 6px -3px rgba(0, 0, 0, 0.2);
        z-index: 1;
    }

    &:nth-child(odd) {
        transform: rotate(1deg); 
    }
    &:nth-child(even) {
        transform: rotate(-1deg); 
    }
    &--reverse {
        &:nth-child(odd) {
            transform: rotate(-1deg); 
        }
        &:nth-child(even) {
            transform: rotate(1deg); 
        }
    }
    &--yellow {
        border-color: colors.$yellow-100;
        &::before {
            border-bottom: 100px solid colors.$yellow-100;
        }
    }
    &--best {
        margin-left: 20px;
        &:nth-child(odd) {
            transform: rotate(4deg); 
            border-color: colors.$yellow-100;
            &::before {
                border-bottom: 100px solid colors.$yellow-100;
            }
        }
        &:nth-child(even) {
            transform: rotate(-4deg); 
        }
    }
    > * {
        white-space: break-spaces;
    }
}

@media (max-width: breakpoints.$mobile) { 

    .bz-card-collab {
        padding: 16px; 
        img {
            width: 80px;
        }
    }
}