/* image container - maintains ratio and responsiveness */ .card-media position: relative; background: #f4f7fc; overflow: hidden; aspect-ratio: 1 / 1; /* classic square product image, looks great */ width: 100%;
.product-img width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1); responsive product card html css codepen
.product-description font-size: 0.85rem; line-height: 1.45; color: #4a5b7a; margin-bottom: 1.3rem; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; /* image container - maintains ratio and responsiveness */
.btn-add:hover background: #1e2f47; transform: scale(0.98); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05); aspect-ratio: 1 / 1