<div class="product-card-container">
<article class="product-card">
<div class="image-wrapper">
<img src="https://placehold.co/600x400/f1f5f9/334155?text=Premium+Audio" alt="Product Image">
<span class="badge">New Arrival</span>
</div>
<div class="content">
<div class="header">
<h3>Studio Pro Headphones</h3>
<span class="rating">★ 4.9</span>
</div>
<p class="description">Experience high-fidelity sound with active noise cancellation and 40-hour battery life.</p>
<div class="footer">
<div class="price-block">
<span class="price">$299</span>
<span class="original-price">$349</span>
</div>
<button>Add to Cart</button>
</div>
</div>
</article>
</div>
* {
box-sizing: border-box;
}
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: #f8fafc;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
color: #0f172a;
}
/* The container query context */
.product-card-container {
container-type: inline-size;
width: 100%;
}
.product-card {
background: #ffffff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
display: flex;
flex-direction: column;
transition: box-shadow 0.2s;
}
.product-card:hover {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.image-wrapper {
position: relative;
height: 240px;
background: #f1f5f9;
overflow: hidden;
}
.image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
}
.product-card:hover img {
transform: scale(1.05);
}
.badge {
position: absolute;
top: 12px;
left: 12px;
background: #ffffff;
padding: 4px 10px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.content {
padding: 24px;
display: flex;
flex-direction: column;
gap: 12px;
}
.header {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
h3 {
margin: 0;
font-size: 1.25rem;
font-weight: 700;
line-height: 1.2;
}
.rating {
font-weight: 600;
color: #d97706;
font-size: 0.9rem;
}
.description {
margin: 0;
color: #64748b;
line-height: 1.5;
font-size: 0.95rem;
}
.footer {
margin-top: auto;
padding-top: 12px;
display: flex;
justify-content: space-between;
align-items: center;
}
.price {
font-size: 1.5rem;
font-weight: 700;
color: #0f172a;
}
.original-price {
font-size: 0.9rem;
color: #94a3b8;
text-decoration: line-through;
margin-left: 6px;
}
button {
background: #0f172a;
color: white;
border: none;
padding: 10px 20px;
border-radius: 8px;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
}
button:hover {
background: #334155;
}
/* CONTAINER QUERY: If the container is wider than 450px */
@container (min-width: 480px) {
.product-card {
flex-direction: row;
align-items: stretch;
}
.image-wrapper {
width: 45%;
height: auto;
min-height: 280px;
}
.content {
width: 55%;
justify-content: center;
}
h3 {
font-size: 1.5rem;
}
}