@import "../../style/variables.scss";

.user-attend-card {
    background-color: $LightCream;
    padding: 20px 15px;
    .user-image-box {
        width: 65px;
        height: 65px;
        border-radius: 50%;
        overflow: hidden;
        background-color: $primary;
        margin: 0 0 10px;
        @media only screen and (min-width: 768px) {
            margin: 0 0 20px;
        }
        @media only screen and (min-width: 1200px) {
            width: 85px;
            height: 85px;
        }
        @media only screen and (min-width: 1600px) {
            width: 120px;
            height: 120px;
            margin: 0 0 30px;
        }
        img {
            object-fit: cover;
            width: 100%;
            height: 100%;
        }
    }
    p {
        font-size: 16px;
        line-height: 1.37;
        color: $primary;
        margin-top: 15px;
        text-align: center;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        overflow: hidden;
        margin: 0 0 8px;
        font-family: "Avenir Next";
        text-transform: capitalize;
        @media only screen and (min-width: 768px) {
            font-size: 18px;
        }
        @media only screen and (min-width: 1441px) {
            font-size: 20px;
        }
        @media only screen and (min-width: 1600px) {
            font-size: 22px;
        }
        &:last-child{
            margin: 0;
        }
    }
}