Design for AIFila con media izquierda
Fila con media izquierda: tarjeta en CSS. Copia las reglas, o el prompt que reproduce el resultado.
CSS
.card-006 {
display: flex;
width: 460px;
background: #fff;
border: 1px solid #e4e4e7;
border-radius: 14px;
overflow: hidden;
font-family: system-ui,sans-serif;
color: #18181b;
transition: box-shadow .2s
}
.card-006:hover {
box-shadow: 0 8px 24px rgba(0,0,0,.1)
}
.card-006__img {
flex: 0 0 150px;
background: linear-gradient(145deg,#fde68a,#f59e0b)
}
.card-006__body {
padding: 18px 20px
}
.card-006 h3 {
margin: 0 0 6px;
font-size: 17px
}
.card-006 p {
margin: 0 0 12px;
font-size: 14px;
color: #52525b
}
.card-006 a {
font-size: 13px;
font-weight: 600;
color: #b45309;
text-decoration: none
}
.card-006 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
HTML
<article class="card-006">
<div class="card-006__img"></div>
<div class="card-006__body">
<h3>Typography audit checklist</h3>
<p>Twelve checks before you ship a type scale.</p>
<a href="#">Open checklist</a>
</div>
</article>Prompt
Construye una tarjeta horizontal de 460px como fila flex: fondo blanco, borde 1px #e4e4e7, radio 14px. A la izquierda una columna de imagen fija de 150px de ancho rellena con un degradado a 145deg de #fde68a a #f59e0b. Cuerpo derecho con padding 18px 20px: título 17px #18181b, texto 14px #52525b, luego un enlace 13px semibold en #b45309. En hover añade sombra 0 8px 24px rgba(0,0,0,.1).