.product-card{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);

    h3{
        text-align: center;
        font-size: var(--font-size-base);
        font-weight: 600;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: calc(1em * 2);
        margin: 0;
    }

    h4{
        font-weight: 600;
        font-size: var(--font-size-sm);
        margin: 0;
        margin-top: var(--space-sm);
        margin-bottom: var(--space-xs);
    }


    a{
        position: relative;
        transition: scale 0.2s ease-in;
        svg{
            position: absolute;
            top: 8px;
            right: 8px;
            padding: 8px;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(110px);
            border-radius: var(--radius-round);
            color: whitesmoke;
        }
    }
    
    img{
        width: 100%;
        aspect-ratio: 1;
        border-radius: var(--radius-xl);
        box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    }

    a:hover{
        scale: 1.03;
    }

    .product-card-buttons{
        display: flex;
        justify-content: center;
        align-items: center;
        padding-inline: 4px;
        gap: var(--space-md);

        span{
            font-weight: 400;
            font-size: var(--font-size-base);
            cursor: pointer;
            color: var(--color-blue);
        }

        span:hover{
            text-decoration: underline;
        }
    }
}