.ShivaProductGrid {
    // scss
    border: 1px solid silver;
    box-shadow: var(--xshop-shadow);
    border-radius: var(--xshop-border-radius);
    position: relative;
    overflow: hidden;

    img{
        width: 100%;
        transition: 500ms;
    }

    h3 {
        margin-top: 1rem;
        text-align: center;
        font-size: 20px;
        font-weight: 300;
        color: var(--xshop-text);
        height: 2.5em;
        overflow: hidden;
    }

    .prices {
        position: absolute;
        width: 100%;
        display: grid;
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
        text-align: center;
        inset-inline-end: 0;
        top: 0;
        border-radius: var(--xshop-border-radius);
        span {
            display: block;
            padding: .5rem;
            background: rgba(255, 255, 255, 0.76);
            color: black;
        }

    }

    .fav-btn, .compare-btn {
        position: absolute;
        inset-inline-end: -12%;
        top: 60%;
        width: 40px;
        height: 40px;
        background: #ffffff55;
        font-size: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        z-index: 4;
        cursor: pointer;
        transition: .4s;

        &:hover {
            background: var(--xshop-primary);
            color: var(--xshop-diff);
        }
    }

    .fav-btn {
        top: calc(60% + 50px);

        &[data-is-fav="-1"]{
            display: none;
        }
        &[data-is-fav="1"]{
            .ri-heart-line{
                display: none;
            }
        }
        &[data-is-fav="0"]{
            .ri-heart-fill{
                display: none;
            }
        }
    }

    &:hover {
        .fav-btn, .compare-btn {
            inset-inline-end: 3%;
        }
        img{
            transform: scale(1.35) rotateZ(7deg);
        }
    }
}
