<section
  class="py-12 md:py-14 bg-[#FEFDFB]"
  data-component-type="Content"
>

  <div class="max-w-[90%] mx-auto">

    <div
      class="grid grid-cols-1 md:grid-cols-3 lg:gap-8 gap-3"
      
    >

      <!-- CARD 1 -->
      <div class="p-8 rounded-sm flex gap-10 transition-shadow text-start">

        <!-- Icon -->
        <div class="w-16 h-16 mx-auto mb-6">
          <img
            data-node="about_card_1_icon"
            data-node-type="file"
            data-node-label="Card 1 Icon"
            data-node-default="./assets/our_story/imge1.png"
            src="{{about_card_1_icon}}"
            class="w-[55px] h-[55px]"
            alt="icon"
          />
        </div>

        <!-- Content -->
        <div>
          <h3
            data-node="about_card_1_title"
            data-node-type="text"
            data-node-label="Card 1 Title"
            data-node-default="Our Story"
            class="text-2xl font-bold mb-3 text-[#534931]"
          >
            {{about_card_1_title}}
          </h3>

          <p
            data-node="about_card_1_desc"
            data-node-type="textarea"
            data-node-label="Card 1 Description"
            data-node-default="Phaertn, proin lacus velit sed dignissim sit feugiat."
            class="text-[#6B6B6B]"
          >
            {{about_card_1_desc}}
          </p>
        </div>
      </div>

      <!-- CARD 2 -->
      <div class="p-8 rounded-sm flex gap-10 transition-shadow text-start">

        <div class="w-16 h-16 mx-auto mb-6">
          <img
            data-node="about_card_2_icon"
            data-node-type="file"
            data-node-label="Card 2 Icon"
            data-node-default="./assets/our_story/image2.png"
            src="{{about_card_2_icon}}"
            class="w-[55px] h-[55px]"
            alt="icon"
          />
        </div>

        <div>
          <h3
            data-node="about_card_2_title"
            data-node-type="text"
            data-node-label="Card 2 Title"
            data-node-default="Our Mission"
            class="text-2xl font-bold mb-3 text-[#534931]"
          >
            {{about_card_2_title}}
          </h3>

          <p
            data-node="about_card_2_desc"
            data-node-type="textarea"
            data-node-label="Card 2 Description"
            data-node-default="Parturient gravida ipsum, amet dictum maecenas."
            class="text-[#6B6B6B]"
          >
            {{about_card_2_desc}}
          </p>
        </div>
      </div>

      <!-- CARD 3 -->
      <div class="p-8 rounded-sm flex gap-10 transition-shadow text-start">

        <div class="w-16 h-16 mx-auto mb-6">
          <img
            data-node="about_card_3_icon"
            data-node-type="file"
            data-node-label="Card 3 Icon"
            data-node-default="../assets/our_story/image3.png"
            src="{{about_card_3_icon}}"
            class="w-[55px] h-[55px]"
            alt="icon"
          />
        </div>

        <div>
          <h3
            data-node="about_card_3_title"
            data-node-type="text"
            data-node-label="Card 3 Title"
            data-node-default="Our Menu"
            class="text-2xl font-bold mb-3 text-[#534931]"
          >
            {{about_card_3_title}}
          </h3>

          <p
            data-node="about_card_3_desc"
            data-node-type="textarea"
            data-node-label="Card 3 Description"
            data-node-default="Phaertn, proin lacus velit sed dignissim sit feugiat."
            class="text-[#6B6B6B]"
          >
            {{about_card_3_desc}}
          </p>
        </div>
      </div>

    </div>
  </div>

</section>

