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

    .crew-header {
      text-align: center;
      margin-bottom: 80px;
    }

    .crew-title {
      font-family: "Rajdhani", sans-serif;
      font-style: italic;
      font-weight: 900;
      font-size: 56px;
      line-height: 100%;
      margin-bottom: 20px;
    }

    .crew-subtitle {
      max-width: 680px;
      margin: 0 auto;
      font-family: "Michroma", sans-serif;
      font-size: 20px;
      line-height: 100%;
      color: #7e7e7e;
    }

    .crew-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 48px;
    }

    .crew-card {
      display: flex;
      flex-direction: column;
    }

    .crew-image {
      width: 100%;
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 20px;
    }

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

    .crew-name {
      font-family: "Michroma", sans-serif;
      font-size: 24px;
      line-height: 100%;
      margin-bottom: 8px;
      color: #000000;
    }

    .crew-role {
      font-family: "Michroma", sans-serif;
      font-size: 16px;
      line-height: 100%;
      color: #7e7e7e;
    }

    @media (max-width: 1024px) {
      .crew-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
      }
    }

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

      .crew-title {
        font-size: 40px;
      }

      .crew-grid {
        grid-template-columns: 1fr;
      }
    }
  </style>

  <div class="crew-header">
    <h2
      class="crew-title"
      data-node="crew_title"
      data-node-type="text"
      data-node-default="The Crew Behind the Culture"
    >
      {{crew_title}}
    </h2>

    <p
      class="crew-subtitle"
      data-node="crew_subtitle"
      data-node-type="text"
      data-node-default="Every detail, every stitch, every vibe—built by people who live the style."
    >
      {{crew_subtitle}}
    </p>
  </div>

  <div class="crew-grid">
    <div class="crew-card">
      <div class="crew-image">
        <img
          src="{{crew_1_image}}"
          data-node="crew_1_image"
          data-node-type="file"
          data-node-default="../assets/Aarav.webp"
          alt="Crew Member"
        />
      </div>
      <div
        class="crew-name"
        data-node="crew_1_name"
        data-node-type="text"
        data-node-default="Aarav Malhotra"
      >
        {{crew_1_name}}
      </div>
      <div
        class="crew-role"
        data-node="crew_1_role"
        data-node-type="text"
        data-node-default="Creative Director"
      >
        {{crew_1_role}}
      </div>
    </div>

    <div class="crew-card">
      <div class="crew-image">
        <img
          src="{{crew_2_image}}"
          data-node="crew_2_image"
          data-node-type="file"
          data-node-default="../assets/Luca.webp"
        />
      </div>
      <div
        class="crew-name"
        data-node="crew_2_name"
        data-node-type="text"
        data-node-default="Luca Moretti"
      >
        {{crew_2_name}}
      </div>
      <div
        class="crew-role"
        data-node="crew_2_role"
        data-node-type="text"
        data-node-default="Lead Fashion Designer"
      >
        {{crew_2_role}}
      </div>
    </div>

    <div class="crew-card">
      <div class="crew-image">
        <img
          src="{{crew_3_image}}"
          data-node="crew_3_image"
          data-node-type="file"
          data-node-default="../assets/Aaron.webp"
        />
      </div>
      <div
        class="crew-name"
        data-node="crew_3_name"
        data-node-type="text"
        data-node-default="Aaron Wells"
      >
        {{crew_3_name}}
      </div>
      <div
        class="crew-role"
        data-node="crew_3_role"
        data-node-type="text"
        data-node-default="Brand Experience Manager"
      >
        {{crew_3_role}}
      </div>
    </div>

    <div class="crew-card">
      <div class="crew-image">
        <img
          src="{{crew_4_image}}"
          data-node="crew_4_image"
          data-node-type="file"
          data-node-default="../assets/Mikael.webp"
        />
      </div>
      <div
        class="crew-name"
        data-node="crew_4_name"
        data-node-type="text"
        data-node-default="Mikael Sørensen"
      >
        {{crew_4_name}}
      </div>
      <div
        class="crew-role"
        data-node="crew_4_role"
        data-node-type="text"
        data-node-default="Production & Quality Lead"
      >
        {{crew_4_role}}
      </div>
    </div>
  </div>
</section>
