🃏 Card Layouts

<div class="card-simple">
  <div class="card-image">🖼️</div>
  <h3>Card Title</h3>
  <p>A short description of the card content goes here.</p>
  <a href="#">Read More →</a>
</div>

<style>
.card-simple {
  background: #fff; border-radius: 20px; padding: 28px;
  border: 1px solid rgba(0,0,0,0.06);
  max-width: 340px; transition: box-shadow 0.3s;
}
.card-simple:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.08); }
.card-image {
  background: #f5efe6; border-radius: 12px; height: 160px;
  margin-bottom: 18px; display: flex; align-items: center;
  justify-content: center; font-size: 2.5rem;
}
.card-simple h3 { font-size: 1.15rem; margin-bottom: 8px; }
.card-simple p { font-size: 0.88rem; color:#6d645a; line-height: 1.5; margin-bottom: 16px; }
.card-simple a { color: #a24832; font-size: 0.88rem; font-weight: 600; text-decoration: none; }
</style>

<div class="card-horizontal">
  <div class="card-thumb">📊</div>
  <div class="card-body">
    <h3>Horizontal Layout</h3>
    <p>Side-by-side image and content layout for compact lists.</p>
  </div>
</div>

<style>
.card-horizontal {
  background: #fff; border-radius: 20px; padding: 24px;
  border: 1px solid rgba(0,0,0,0.06);
  display: flex; gap: 24px; align-items: center;
}
.card-thumb {
  background: #f5efe6; border-radius: 14px;
  min-width: 100px; height: 100px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; flex-shrink: 0;
}
.card-body h3 { font-size: 1.05rem; margin-bottom: 6px; }
.card-body p { font-size: 0.85rem; color:#6d645a; line-height: 1.5; }
</style>