:root{
    --card-radius: 8px;
    --shadow-sm: 0 2px 8px rgba(0,0,0,.06);
    --shadow-lg: 0 6px 16px rgba(0,0,0,.10);
}


.products-section{
    padding: 2.5rem 0 4rem;
    background: #fff;
}

.products-title{
    font-size: 2rem;
    margin: 0 0 1.25rem;
    color: #333;
}


.products-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}


.product-card{
    display: block;
    padding: 1rem 1rem 1.1rem;
    border: 1px solid #eaeaea;
    border-radius: var(--card-radius);
    background: #fafafa;
    box-shadow: var(--shadow-sm);
    color: inherit;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.product-card:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    background: #fff;
}

.product-card h3{
    margin: .2rem 0 0;
    font-size: 1.05rem;
    line-height: 1.3;
    color: #111;
}

.product-card .tag{
    display: inline-block;
    font-size: .75rem;
    color: #555;
    background: #eef1f5;
    border-radius: 999px;
    padding: .15rem .5rem;
    margin-bottom: .35rem;
}


:root{
    --card-pad-x: 1rem;   
    --tag-pad-x: .6rem;   
}

.product-card{
    padding: 1rem var(--card-pad-x) 1.1rem;
}

.product-card .tag{
    padding: .15rem var(--tag-pad-x);
    margin-left: calc(-1 * var(--tag-pad-x)); 
    border-radius: 999px;
    line-height: 1; 
}

.product-card h3{
    margin: .4rem 0 0; 
}