

.testimonials {
    background: @greyBg;
    margin-bottom: 0;

    .row { background: none; }

    .grid { margin-bottom: 0; }

    .grid__col {
        display: flex;
        flex-wrap: wrap;
    }
}

.testimonial {
    display: flex;
    flex-wrap: wrap;
    background: #fff;
}

.testimonial__quote,
.testimonial__caption {
    flex: 0 0 100%;
}

.testimonial__quote {
    // blockquote reset
    margin: 0;
    position: relative;
    border: none;
    color: @text-color;
    padding: 0;
    font-style: normal;

    // styling
    //&:extend(.bold);
    padding: (@spacer / 2);
    align-self: flex-start;

    // quote characters
    // &:before {
    //     content: "“";
    //     font-size: 250%;
    //     color: @greyHr;
    //     line-height: 0;
    //     margin-left: -1em;
    // }
}

.testimonial__caption {
    align-self: flex-end;
    display: flex;
    align-items: center;
    border-top: 2px solid lighten(@greySocial, 10%);
    padding-top: (@spacer / 2);
    position: relative;
    background: @greyBg;

    // speech triangle
    &:before {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
        left: 4em;
        top: 0;
        border-width: .9em .9em 0 0;
        border-color: transparent;
        border-top-color: lighten(@greySocial, 10%);
    }
}

.testimonial__avatar {
    width: 4em;
    height: 4em;
    display: inline-block;
    margin-right: (@spacer / 2);
    border-radius: 50%;
    border: 2px solid lighten(@greySocial, 20%);
}

.testimonial__cite {
    &:extend(.small);
    font-style: normal;
    flex: 1;
    color: @greySocial;
}

.testimonial__name {
    font-weight: @font-weight-bold;
}

.testimonial__org {
    display: block;
}
