item css

.item {
    display: block;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    margin: 0 12px;
    @include transition(transform, 0.2s, ease-in-out);
    &:hover {
        transform: translateY(-5px);
        box-shadow: $primaryBoxShadow;
    }
    &-img {
        width: 100%;
        img {
            width: 100%;
            object-fit: contain;
        }
    }
    &-content {
        padding: 12px 16px 16px;
        &-city {
            font-size: 12px;
            line-height: 19px;
            color: $textGray;
        }
        &-title {
            font-size: 16px;
            line-height: 24px;
            color: $textBlack;
            font-weight: 500;
        }
        &-desc {
            padding-top: 6px;
            font-size: 12px;
            line-height: 17px;
            @include text-truncate(1);
            color: $textGray;
        }
        &-rate {
            padding-top: 6px;
            > span {
                font-size: 12px;
                line-height: 17px;
                color: $textGray;
                > span {
                    font-size: 12px;
                    line-height: 17px;
                    color: #ff9c00;
                    font-weight: 600;
                }
            }
        }
        &-tag {
            padding-top: 6px;
            span {
                font-size: 12px;
                line-height: 17px;
                color: $textGray;
                padding: 1px 6px;
                background-color: $primaryBackgroundColor;
                border: $primaryBorder;
                border-radius: 4px;
                font-weight: 600;
                &:first-of-type {
                    color: #00b371;
                    background-color: #f0fffa;
                }
            }
        }
        &-price {
            padding-top: 12px;
            > span {
                font-size: 12px;
                line-height: 17px;
                color: $textGray;
                &:first-of-type {
                    text-decoration: line-through;
                }
            }
            div {
                display: flex;
                justify-content: space-between;
                align-items: center;
                > span {
                    font-size: 14px;
                    line-height: 20px;
                    color: $textBlack;
                    font-weight: 500;
                    &:last-of-type {
                        font-size: 12px;
                        line-height: 17px;
                        color: $primaryColor;
                        background-color: #fff0e5;
                        border: $primaryBorder;
                        border-radius: 4px;
                        padding: 1px 6px;
                        border-color: $primaryColor;
                    }
                }
            }
        }
    }
}