# Pilha com container query (C 069)

Categoria: Cards  
Tags: container-query, responsive, modern-css, adaptive, light  
Página: https://designforai.dev/pt/snippet/card-069

## Prompt

Construa um card que responde ao seu contêiner, não à viewport. Envolva-o em uma div com container-type: inline-size. O card é branco com borda de 1px #e5e7eb e raio de 14px, empilhado por padrão (imagem de 160px no topo com gradiente de 135deg #a7f3d0 para #0d9488, depois um corpo com título 17px e texto 14px #6b7280). Sob @container (min-width: 400px) mude para uma linha com coluna de imagem fixa de 180px e aumente o título para 20px.

## HTML

```html
<div class="card-069-wrap" style="width:520px">
  <article class="card-069">
    <div class="card-069__img"></div>
    <div class="card-069__body"><h3>Sized by the parent</h3><p>Resize the wrapper below 400px and this card stacks vertically.</p></div>
  </article>
</div>
```

## CSS

```css
.card-069-wrap{container-type:inline-size;max-width:100%}
.card-069{display:flex;flex-direction:column;background:#fff;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;font-family:system-ui,sans-serif;color:#111827}
.card-069__img{height:160px;background:linear-gradient(135deg,#a7f3d0,#0d9488)}
.card-069__body{padding:18px 20px}
.card-069 h3{margin:0 0 6px;font-size:17px}
.card-069 p{margin:0;font-size:14px;line-height:1.5;color:#6b7280}
@container (min-width:400px){
  .card-069{flex-direction:row}
  .card-069__img{flex:0 0 180px;height:auto}
  .card-069 h3{font-size:20px}
}
```