.content-wrapper {
    padding: 16px;
  }
  
  .main-content {
    .card-section {
      margin-bottom: 20px;
  
      .cards {
        display: flex;
        flex-direction: column; /* 使卡片纵向排列 */
        gap: 20px; /* 卡片之间的间距 */
      }
  
      .card {
        background: rgba(255, 255, 255, 0.8); /* 半透明背景以增强文字可读性 */
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        transition: transform 0.2s;
        width: calc(100% - 32px); /* 使卡片宽度略小于页面 */
        margin: 0 auto; /* 使卡片居中 */
        min-height: 500px; /* 设置最小高度，确保有足够空间放置内容 */
  
        .card-image {
          height: 400px; /* 设置图片区域的高度 */
          background-size: contain; /* 背景图像覆盖，保持等比例缩放 */
          background-position: center; /* 背景图像居中 */
          border-top-left-radius: 8px; /* 圆角 */
          border-top-right-radius: 8px; /* 圆角 */
        }
  
        .card-content {
          padding: 10px; /* 内容的内边距 */
          text-align: center; /* 内容居中 */
        }
  
        h4 {
          margin: 0 0 10px; /* 标题下方的间距 */
        }
  
        p {
          margin: 0; /* 描述的外边距 */
          color: #666; /* 描述的颜色 */
        }
  
        &:hover {
          transform: scale(1.05);
        }
      }
    }
  }