.ul-site-group {
    margin-bottom: 8px;
}

.ul-site-group-header {
    font-size     : 16px;
    color         : #333;
    padding-bottom: 8px;
}

.ul-site-list {
    display        : flex;
    align-items    : flex-start;
    justify-content: flex-start;
    flex-wrap      : wrap;
    margin-top     : 8px;
}

.ul-site-item {
    width          : 20%;
    margin-right   : 5%;
    display        : flex;
    align-items    : flex-start;
    justify-content: flex-start;
    margin-bottom  : 15px;


    &.card {
        background-color: #fff;
        border-radius   : 5px;
        padding         : 10px;
        margin-right    : 15px;
    }

    &.same-height {
        align-self: normal;
    }
}

.ul-site-item-logo {
    width              : 34px;
    height             : 34px;
    margin-right       : 8px;
    margin-top         : 4px;
    background-size    : cover;
    background-position: center;


}


.ul-site-item-info {
    width: calc(100% - 34px);

}

.ul-site-item-title {
    color          : #4662d9;
    font-weight    : bold;
    text-decoration: none;
}

.ul-site-item-desc {
    font-size: 12px;
    color    : #666;
}

@media screen and (max-width:450px) {

    .ul-site-list {
        display        : flex;
        align-items    : flex-start;
        justify-content: space-between;

        .ul-site-item {
            width       : calc(50% - 10px);
            margin-right: 0;

            &.card {
                width: calc(50% - 30px);
            }
        }

        .ul-site-item-desc {
            font-size : 11px;
            margin-top: 3px;
        }
    }
}