@import 'variables';
@import 'mixins';

.widget-maintainer,
.widget-mentor {
    border:1px solid #ddd;
    border-radius:2px;
    padding:15px;
    position:relative;
    overflow:hidden;

    .pure-u-1-6 {
        display:none;
        @media only screen and (min-width: 490px) {
            display:block;
        }
    }

    img {
        display:block;
        width:100%;
        padding-right:20px;
        filter: grayscale(100%);
        border-radius:2px;
    }
    h3 {
        color:$color-2;
        @include font-size(16, 19);
        font-weight:$bold;
        margin-bottom:5px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        a {
            display:inline-block;
            margin-left:3px;
            padding-left:6px;
            border-left:1px solid #aaa;
            @include font-size(13, 16);
            color:#666;
            font-weight:$regular;
            text-decoration:underline;
        }
    }
    .bio {
        color:#555;
        @include font-size(14, 17);
        .holding-text {
            color:#aaa;
        }
    }
   .banner {
        position:absolute;
        width:140px;
        height:20px;
        position:absolute;
        left:-45px;
        top:15px;
        background:$color-2;
        font-weight:$regular;
        text-align:center;
        color:#fff;
        transform: rotate(-45deg);
        @include font-size(12, 20);
        z-index:5;
    }
}
