<section data-component-type="Content" class="real-life-section">
  <style>
    .real-life-section {
      width: 100%;
      padding: 0px 100px 100px;
      background: #ffffff;
    }

    .real-life-grid {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 80px;
      align-items: start;
    }

    .real-life-left h2 {
      font-family: "Rajdhani", sans-serif;
      font-style: italic;
      font-weight: 900;
      font-size: 56px;
      line-height: 100%;
      color: #000000;
      margin-bottom: 40px;
      max-width: 544px;
    }

    .real-life-image {
      width: 100%;
      border-radius: 12px;
      overflow: hidden;
    }

    .real-life-image img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 12px;
    }

    /* RIGHT SIDE */
    .real-life-right {
      display: flex;
      flex-direction: column;
      gap: 40px;
    }

    .mission-text {
      font-family: "Michroma", sans-serif;
      font-size: 24px;
      line-height: 38px;
      color: #7e7e7e;
      max-width: 736px;
    }

    /* FEATURE LIST */
    .feature-list {
      display: flex;
      flex-direction: column;
      gap: 40px;
    }

    .feature-item {
      display: grid;
      grid-template-columns: 14px 1fr;
      gap: 28px;
      align-items: center;
    }

    .feature-border {
      width: 6px;
      height: 150px;
      background: #cbd5e1;
      border-radius: 12px;
      position: relative;
    }

    .feature-item.active .feature-border {
      background: #000000;
    }

    .feature-content h4 {
      font-family: "Michroma", sans-serif;
      font-size: 32px;
      font-weight: 400;
      line-height: 100%;
      margin-bottom: 14px;
      color: #000000;
    }

    .feature-content p {
      font-family: "Michroma", sans-serif;
      font-size: 20px;
      line-height: 26px;
      color: #7e7e7e;
      max-width: 660px;
    }

    /* RESPONSIVE */
    @media (max-width: 1024px) {
      .real-life-grid {
        grid-template-columns: 1fr;
        gap: 60px;
      }
    }

    @media (max-width: 768px) {
      .real-life-section {
        padding: 80px 20px;
      }

      .real-life-left h2 {
        font-size: 42px;
      }

      .mission-text {
        font-size: 20px;
      }

      .feature-content h4 {
        font-size: 26px;
      }

      .feature-content p {
        font-size: 18px;
      }
    }
  </style>

  <div class="real-life-grid">
    <!-- LEFT -->
    <div class="real-life-left">
      <h2
        data-node="real_life_title"
        data-node-type="text"
        data-node-default="Built for Streets, Designed for Real Life"
      >
        {{real_life_title}}
      </h2>

      <div class="real-life-image">
        <img
          src="{{real_life_image}}"
          data-node="real_life_image"
          data-node-type="file"
          data-node-default="../assets/Real Life.webp"
          alt="Built for Real Life"
        />
      </div>
    </div>

    <!-- RIGHT -->
    <div class="real-life-right">
      <p
        class="mission-text"
        data-node="mission_text"
        data-node-type="text"
        data-node-default="Our mission is simple—deliver fits that stay loud, last long, and feel right. Style isn’t seasonal here. It’s a lifestyle."
      >
        {{mission_text}}
      </p>

      <div class="feature-list">
        <div class="feature-item">
          <div class="feature-border"></div>
          <div class="feature-content">
            <h4 data-node="feature_1_title" data-node-type="text" data-node-default="Quality Without Compromise">
              {{feature_1_title}}
            </h4>
            <p
              data-node="feature_1_desc"
              data-node-type="text"
              data-node-default="Premium fabrics, clean finishes, details that hold up no matter the weather. Made for repeat fits."
            >
              {{feature_1_desc}}
            </p>
          </div>
        </div>

        <div class="feature-item active">
          <div class="feature-border"></div>
          <div class="feature-content">
            <h4 data-node="feature_2_title" data-node-type="text" data-node-default="Style That Speaks">
              {{feature_2_title}}
            </h4>
            <p
              data-node="feature_2_desc"
              data-node-type="text"
              data-node-default="Silhouettes that turn sidewalks into runways. Every piece designed to show up and stand out."
            >
              {{feature_2_desc}}
            </p>
          </div>
        </div>

        <div class="feature-item">
          <div class="feature-border"></div>
          <div class="feature-content">
            <h4 data-node="feature_3_title" data-node-type="text" data-node-default="Community at the Core">
              {{feature_3_title}}
            </h4>
            <p
              data-node="feature_3_desc"
              data-node-type="text"
              data-node-default="Shaped by the people who wear us. Your vibe becomes our next drop."
            >
              {{feature_3_desc}}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
