<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Story: — Film &amp; TV</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Spectral:ital,wght@0,400;0,600;0,700;1,400&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/main.css">
</head>
<body>

  <header class="site-header">
    <div class="wrap">
      <nav class="nav-left"><div class="nav-group">
        <a class="nav-link" data-ns="production-service" href="production-service.html">Production Service</a>
        <a class="nav-link" data-ns="film-tv" href="film-tv.html">Film &amp; TV</a>
        <a class="nav-link" data-ns="photography" href="photography.html">Photography</a>
      </div></nav>
      <a class="brand-logo nav-center" data-ns="home" href="index.html">Story:</a>
      <nav class="nav-right"><div class="nav-group">
        <a class="nav-link" href="#" data-mega="brands">Brands</a>
        <a class="nav-link" href="#">Shop</a>
        <a class="nav-link" href="#" data-mega="search">Search</a>
        <a class="nav-link" data-ns="team" href="team.html">Contact</a>
      </div>
      <button class="nav-toggle">Menu</button></nav>
    </div>
  </header>

  <div data-barba="wrapper">
    <main id="main" class="page" data-barba="container" data-barba-namespace="film-tv" data-bg="sky">

      <section class="page-intro">
        <div class="wrap">
          <h1 class="h-page" data-split>Film &amp; TV</h1>
          <p class="lead">Our team of creators are working on fresh new content, including drama shows as well as pure entertainment.</p>
        </div>
      </section>

      <section class="section" style="padding-top:0">
        <div class="wrap">
          <div class="work-grid" data-stagger>

            <article class="work-item">
              <div class="work-item__media" data-video>
                <img src="https://picsum.photos/seed/gurus/900/560" alt="Gurus de la Potencia">
                <span class="play-badge"><svg viewBox="0 0 16 16" fill="#111"><path d="M3 2l11 6-11 6z"/></svg></span>
              </div>
              <h3 class="work-item__title">Gurus de la Potencia</h3>
              <p class="work-item__meta">Reality</p>
            </article>

            <article class="work-item">
              <div class="work-item__media" data-video>
                <img src="https://picsum.photos/seed/totanira/900/560" alt="Tot Anirá Be">
                <span class="play-badge"><svg viewBox="0 0 16 16" fill="#111"><path d="M3 2l11 6-11 6z"/></svg></span>
              </div>
              <h3 class="work-item__title">Tot Anirá Be</h3>
              <p class="work-item__meta">Comedy</p>
            </article>

            <article class="work-item work-item--wide">
              <div class="work-item__media" data-video>
                <img src="https://picsum.photos/seed/tacodeojo/1600/760" alt="Taco de Ojo">
                <span class="play-badge"><svg viewBox="0 0 16 16" fill="#111"><path d="M3 2l11 6-11 6z"/></svg></span>
              </div>
              <h3 class="work-item__title">Taco de Ojo</h3>
              <p class="work-item__meta">Reality</p>
            </article>

          </div>
        </div>
      </section>

    </main>
  </div>

  <footer class="site-footer">
    <div class="wrap">
      <div class="footer-top">
        <div>
          <a href="index.html" class="footer-logo">Story:</a>
          <p class="footer-address">Fernando Montes de Oca #5<br>Colonia Condesa, 06140<br>México City, México</p>
        </div>
        <div class="footer-social">
          <a href="#">Instagram</a><a href="#">LinkedIn</a><a href="#">Facebook</a><a href="#">Vimeo</a>
        </div>
        <div class="footer-countries">México<br>Colombia<br>Chile<br>Panamá<br>Costa Rica</div>
      </div>
      <div class="footer-partners">
        <img class="partner-logo" src="assets/logos/iq.svg" alt="International Quorum of Motion Picture Producers">
        <img class="partner-logo" src="assets/logos/entrepreneurs-organization.svg" alt="Entrepreneurs' Organization">
        <img class="partner-logo" src="assets/logos/yda.svg" alt="Young Director Award Friend">
        <img class="partner-logo" src="assets/logos/pandora.svg" alt="Pandora">
        <img class="partner-logo" src="assets/logos/owned.svg" alt="Owned">
      </div>
    </div>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/SplitText.min.js"></script>
  <script src="https://unpkg.com/lenis@1.1.13/dist/lenis.min.js"></script>
  <script src="https://unpkg.com/@barba/core"></script>
  <script src="js/main.js"></script>
</body>
</html>
