:root {
      /* =========================
         可修改：模块整体设置
         1. 模块整体 100% 铺满宽度
         2. 中间内容单独限宽
         3. 可改背景色、背景图、最小高度、圆角
         ========================= */
      --page-bg: transparent;
      --section-bg: #ffffff;
      --section-bg-image: none;
      --section-bg-size: cover;
      --section-bg-position: center;
      --section-bg-repeat: no-repeat;
      --content-max-width: 980px;
      --section-min-height: auto;
      --section-radius: 0px;

      /* =========================
         可修改：模块内边距
         ========================= */
      --section-padding-top: 46px;
      --section-padding-right: 24px;
      --section-padding-bottom: 54px;
      --section-padding-left: 24px;

      /* =========================
         可修改：标题区样式
         ========================= */
      --title-font-size: 34px;
      --title-line-height: 1.12;
      --title-font-weight: 700;
      --title-color: #2f3650;
      --title-letter-spacing: -0.03em;
      --title-margin-bottom: 16px;

      --desc-font-size: 18px;
      --desc-line-height: 1.5;
      --desc-font-weight: 400;
      --desc-color: #39415c;
      --desc-max-width: 760px;
      --header-margin-bottom: 50px;

      /* =========================
         可修改：卡片网格设置
         ========================= */
      --grid-column-gap: 20px;
      --grid-row-gap: 20px;
      --card-bg: #fafbff;
      --card-radius: 22px;
      --card-min-height: 278px;
      --card-padding-top: 38px;
      --card-padding-right: 24px;
      --card-padding-bottom: 30px;
      --card-padding-left: 24px;

      /* =========================
         可修改：图标尺寸
         说明：下面默认用图片 img，可直接替换成你自己的图标
         ========================= */
      --icon-width: 64px;
      --icon-height: 64px;
      --icon-margin-bottom: 26px;

      /* =========================
         可修改：卡片标题与描述
         ========================= */
      --card-title-font-size: 20px;
      --card-title-line-height: 1.18;
      --card-title-font-weight: 500;
      --card-title-color: #2f3650;
      --card-title-margin-bottom: 18px;

      --card-desc-font-size: 13px;
      --card-desc-line-height: 1.45;
      --card-desc-font-weight: 400;
      --card-desc-color: #4b536d;
      --card-desc-max-width: 240px;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      background: var(--page-bg);
      font-family: "Avenir Next", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
      color: var(--title-color);
    }

    .provide-section {
      width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      min-height: var(--section-min-height);
      padding: var(--section-padding-top) var(--section-padding-right) var(--section-padding-bottom) var(--section-padding-left);
      background-color: var(--section-bg);
      background-image: var(--section-bg-image);
      background-size: var(--section-bg-size);
      background-position: var(--section-bg-position);
      background-repeat: var(--section-bg-repeat);
      border-radius: var(--section-radius);
    }

    .provide-container {
      width: 100%;
      max-width: var(--content-max-width);
      margin: 0 auto;
    }

    .provide-header {
      text-align: center;
      margin-bottom: var(--header-margin-bottom);
    }

    .provide-title {
      margin: 0 0 var(--title-margin-bottom);
      font-size: var(--title-font-size);
      line-height: var(--title-line-height);
      font-weight: var(--title-font-weight);
      color: var(--title-color);
      letter-spacing: var(--title-letter-spacing);
    }

    .provide-desc {
      margin: 0 auto;
      max-width: var(--desc-max-width);
      font-size: var(--desc-font-size);
      line-height: var(--desc-line-height);
      font-weight: var(--desc-font-weight);
      color: var(--desc-color);
    }

    .provide-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      column-gap: var(--grid-column-gap);
      row-gap: var(--grid-row-gap);
    }

    .provide-card {
      min-height: var(--card-min-height);
      padding: var(--card-padding-top) var(--card-padding-right) var(--card-padding-bottom) var(--card-padding-left);
      background: var(--card-bg);
      border-radius: var(--card-radius);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .provide-icon {
      width: var(--icon-width);
      height: var(--icon-height);
      margin-bottom: var(--icon-margin-bottom);
    }

    .provide-icon img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
    }

    .provide-card__title {
      margin: 0 0 var(--card-title-margin-bottom);
      font-size: var(--card-title-font-size);
      line-height: var(--card-title-line-height);
      font-weight: var(--card-title-font-weight);
      color: var(--card-title-color);
    }

    .provide-card__desc {
      margin: 0;
      max-width: var(--card-desc-max-width);
      font-size: var(--card-desc-font-size);
      line-height: var(--card-desc-line-height);
      font-weight: var(--card-desc-font-weight);
      color: var(--card-desc-color);
    }

    @media (max-width: 767px) {
      :root {
        /* =========================
           可修改：手机端尺寸
           手机端改为单列堆叠
           ========================= */
        --content-max-width: 100%;
        --section-padding-top: 28px;
        --section-padding-right: 16px;
        --section-padding-bottom: 34px;
        --section-padding-left: 16px;
        --title-font-size: 30px;
        --title-margin-bottom: 12px;
        --desc-font-size: 15px;
        --header-margin-bottom: 26px;
        --grid-column-gap: 0px;
        --grid-row-gap: 14px;
        --card-min-height: auto;
        --card-padding-top: 28px;
        --card-padding-right: 18px;
        --card-padding-bottom: 24px;
        --card-padding-left: 18px;
        --icon-width: 56px;
        --icon-height: 56px;
        --icon-margin-bottom: 18px;
        --card-title-font-size: 18px;
        --card-desc-font-size: 13px;
      }

      .provide-grid {
        grid-template-columns: 1fr;
      }
    }