.card-container {
     display: flex;
     flex-wrap: wrap;
     gap: 1.5rem;
     padding: 2rem;
     justify-content: center;
     background-color: #f8f9fa;
   }
   
   .card {
     flex: 0 1 300px;
     background: white;
     border-radius: 12px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     overflow: hidden;
     transition: transform 0.3s ease;
   }
   
   .card:hover {
     transform: translateY(-5px);
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
   }
   
   .card-image {
     width: 100%;
     height: 200px;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 3rem;
   }
   
   .card-content {
     padding: 1.5rem;
   }
   
   .card-title {
     margin: 0 0 1rem 0;
     color: #2c3e50;
     font-size: 1.25rem;
   }
   
   .card-text {
     color: #7f8c8d;
     line-height: 1.6;
     margin: 0 0 1.5rem 0;
   }
   
   .card-button {
     background-color: #3498db;
     color: white;
     border: none;
     padding: 0.75rem 1.5rem;
     border-radius: 6px;
     cursor: pointer;
     font-weight: bold;
     transition: background-color 0.3s;
   }
   
   .card-button:hover {
     background-color: #2980b9;
   }

<div class="card-container">
<div class="card">
  <div class="card-image">🎨</div>
  <div class="card-content">
    <h3 class="card-title">設計服務</h3>
    <p class="card-text">提供專業的視覺設計服務，包含品牌識別、海報設計、UI/UX 設計等。</p>
    <button class="card-button">了解更多</button>
  </div>
</div>

<div class="card">
  <div class="card-image">💻</div>
  <div class="card-content">
    <h3 class="card-title">網頁開發</h3>
    <p class="card-text">使用最新技術開發響應式網站，提供優質的使用者體驗。</p>
    <button class="card-button">了解更多</button>
  </div>
</div>

<div class="card">
  <div class="card-image">📱</div>
  <div class="card-content">
    <h3 class="card-title">行動應用</h3>
    <p class="card-text">開發跨平台行動應用程式，iOS 和 Android 一次搞定。</p>
    <button class="card-button">了解更多</button>
  </div>
</div>