.contributor {
    @include flex-direction(column);
    border-radius: var(--contributor-border-radius, 1.2rem);
    background: var(--contributor-background-color, #ffffff);
    border: var(--contributor-border, none);
}

.topContainer {
    @include flex-align(center, space-between);
    flex-wrap: wrap;
    gap: 0.8rem;
    padding: 0.6rem 1.2rem;

    @include min(mobile) {
        display: grid;
        grid-template-columns: auto 11.4rem;
    }
    
    @include min(tablet) {
        grid-template-columns: auto auto;
    }
    
    @include min(laptop) {
        display: grid;
        grid-template-columns: 1.75fr minmax(auto, 1.25fr) minmax(auto, 2.25fr);
    }
}

.bottomContainer {
    @include flex-direction(column);
    gap: 1.6rem;
    padding: 1.2rem 0.6rem;
    border-top: var(--contributor-top-border-top, 1px solid #dedede);
}

.socials {
    @include flex-align(center, flex-end);
    flex-wrap: wrap;
    gap: 0.6rem;

    a {
        background-color: var(--contributor-social-background-color, #515156);
        margin: 0;
        height: 2.4rem;
        width: 2.4rem;

        > svg {
            color: var(--contributor-social-icons-fill-color, #ffffff);
            fill: var(--contributor-social-icons-fill-color, #ffffff);
        }
    }
    
    @include min(laptop) {
        max-width: unset;
        @include flex-align(center, flex-start);
    }
}

.statsContainer {
    @include flex-direction(row);
    flex-wrap: wrap;
    gap: 0.8rem;
    margin: 1.9rem 0;

    @include min(mobile-m) {
        grid-column: 1 / span 2;
    }

    @include min(tablet) {
        flex-basis: unset;
    }

    @include min(laptop) {
        @include flex-align(center, flex-end);
        grid-column: 3;
    }
}

.stats {
    @include flex-direction(row);
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border-radius: var(--contributor-stats-border-radius, 0.8rem);
    background: var(--contributor-stats-background-color, #f4f4f4);
    color: var(--contributor-stats-font-color, #1b1b1c);
    font-size: var(--contributor-stats-font-size, 1.4rem);
    font-weight: var(--contributor-stats-font-weight, 700);
    line-height: var(--contributor-stats-line-height, 2.2rem);

    p {
        color: var(--contributor-stats-text-font-color, #64646d);
        font-size: var(--contributor-stats-text-font-size, 1.4rem);
        font-weight: var(--contributor-stats-text-font-weight, 500);
        line-height: var(--contributor-stats-text-line-height, 2.2rem);
    }
}

.biography {
    @include flex-direction(column);
    gap: 1.6rem;
    color: var(--contributor-biography-font-color, #515156);
    font-size: var(--contributor-biography-font-size, 1.4rem);
    font-weight: var(--contributor-biography-font-weight, 400);
    line-height: var(--contributor-biography-line-height, 2.2rem);

    p {
        &:last-of-type:not(:only-child) {
            color: var(--contributor-biography-font-color, #515156);
            font-size: var(--contributor-biography-font-size, 1.2rem);
            font-weight: var(--contributor-biography-font-weight, 400);
            line-height: var(--contributor-biography-line-height, 1.8rem);
            font-style: italic;
        }
    }
}