.listings-grid__item {
    background-color: #fff;
    display: block;
    position: relative;
    overflow: hidden;
    margin-bottom: 25px;
    border-radius: 2px;
    box-shadow: @card-shadow;
    .transition(background-color);
    .transition-duration(300ms);

    &:hover {
        background-color: #fffdee;
    }

    &.listings-grid__item--sold {
        &:before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background: url(../img/sold.png) bottom 15px right 30px no-repeat;
            background-size: 100px;
            z-index: 10;
        }
    }
}

.listings-grid__body {
    padding: 18px 20px 13px;

    & > small {
        color: @text-muted;
        display: block;
        font-size: 12px;
        margin-bottom: 5px;
        font-weight: 500;
        line-height: 16px;
    }

    & > h5 {
        font-size: 13px;
        margin: 0 0 5px;
    }

    & > small,
    & > h5 {
        .text-overflow();
    }
}

.listings-grid__main {
    &.pull-left {
        padding-right: 0;
    }

    & > img {
        width: 100%;
        .transition(opacity);
        .transition-duration(200ms);
    }
}

.listings-grid__price {
    position: absolute;
    font-weight: 500;
}

.listings-grid__attrs {
    .list-inline();
    padding: 13px 12px 13px 18px;
    border-top: 1px solid rgba(0, 0, 0, 0.04);

    & > li {
        font-size: 13px;
        font-weight: 500;
        color: @text-color;
        margin-right: 13px;
    }
}

.listings-grid__icon {
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    vertical-align: top;
    margin-top: 1px;
    .opacity(0.9);
}

.listings-grid__icon--bed {
    .img-retina('../img/icons/bed.png', '../img/icons/bed@2x.png', 22px, 16px);
    width: 22px;
}

.listings-grid__icon--bath {
    .img-retina('../img/icons/bath.png', '../img/icons/bath@2x.png', 21px, 16px);
    width: 21px;
}

.listings-grid__icon--parking {
    .img-retina('../img/icons/parking.png', '../img/icons/parking@2x.png', 24px, 16px);
    width: 24px;
}

.listings-grid__price(@font-size) {
    bottom: 0;
    left: 0;
    #gradient > .vertical(rgba(0,0,0,0); rgba(0,0,0,0.5));
    width: 100%;
    color: #fff;
    padding: 30px 20px 15px;
    font-size: @font-size;
}

//Grid View
.listings-grid {
    .listings-grid__main {
        position: relative;
    }

    .listings-grid__price {
        .listings-grid__price(17px);
    }
}

.listings-grid__favorite {
    position: absolute;
    z-index: 1;
    bottom: 6px;
    right: 10px;
}


//List View
.listings-list {

    @media(min-width: @screen-md-min) {
        .listings-grid__body {
            padding-right: 105px;
        }

        .listings-grid__price {
            top: 18px;
            right: 22px;
        }
    }

    @media(min-width: @screen-sm-min) {
        &:not(.listings-list--alt) {
            .listings-grid__main {
                width: 175px;
                border: 3px solid #Fff;
            }
        }

        &.listings-list--alt {
            .listings-grid__main {
                width: 155px;
            }
        }
    }

    @media(max-width: @screen-sm-max) {
        .listings-grid__main {
            position: relative;

            .listings-grid__price {
                .listings-grid__price(15px);
            }
        }
    }

    @media(max-width: @screen-xs-max) {
        border-radius: 3px 3px 2px 2px;

        .listings-grid__main, .media-body {
            width: 100%;
        }
    }

    .listings-grid__price {
        color: @text-strong;
        font-weight: 700;
    }
}

.listings-list--alt {
    .listings-grid__item {
        padding: 20px;
        margin: 0;
        box-shadow: none;
        border-radius: 0;

        &:not(:last-child) {
            border-bottom: 1px solid @input-border;
        }
    }

    .listings-grid__main  {
        & > img {
            border-radius: 2px;
        }

        .listings-grid__price {
            border-radius: 0 0 3px 3px;
        }
    }

    .listings-grid__attrs {
        padding: 0 0 0 20px;
        border: 0;
    }

    @media(max-width: @screen-xs-max) {
        .listings-grid__body, .listings-grid__attrs {
            padding-left: 0;
            padding-right: 0;
        }
    }
}