<?php declare(strict_types=1);
$page_title       = 'Gallery | Big Breath';
$page_description = 'Images from Big Breath sessions, retreats, and global events. Big Joe in practice across Bhutan, Saudi Arabia, Japan, India, Oman, and Detroit.';
$page_canonical   = 'https://bigbreath.co/gallery/';
require __DIR__ . '/../components/_header.php';
?>

<section class="bb-section" style="padding-top:calc(var(--pad-section) + var(--nav-height));">
  <div class="bb-container">
    <span class="bb-label bb-reveal">Gallery</span>
    <hr class="bb-rule">
    <h1 class="bb-display bb-reveal" style="margin-bottom:var(--s-4);">The work, in the world.</h1>
    <p class="bb-body bb-reveal" style="max-width:var(--container-narrow);margin-bottom:var(--s-12);">15,000+ sessions. 15+ countries. Every frame here is a moment of ignition.</p>
  </div>
</section>

<section class="bb-section" style="padding-top:0;">
  <div class="bb-container">
    <span class="bb-label bb-reveal" style="margin-bottom:var(--s-6);">The Practitioner</span>
    <hr class="bb-rule">
    <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4);margin-bottom:var(--s-16);">
      <div class="bb-reveal" style="grid-column:span 1;aspect-ratio:2/3;overflow:hidden;">
        <img src="/assets/images/gallery/practitioner-1.webp" alt="Big Joe portrait" style="width:100%;height:100%;object-fit:cover;display:block;">
      </div>
      <div class="bb-reveal" style="grid-column:span 2;aspect-ratio:16/9;overflow:hidden;align-self:start;">
        <img src="/assets/images/gallery/practitioner-3.webp" alt="Big Joe leading a session" style="width:100%;height:100%;object-fit:cover;display:block;">
      </div>
      <div class="bb-reveal" style="grid-column:span 2;aspect-ratio:16/9;overflow:hidden;">
        <img src="/assets/images/gallery/practitioner-5.webp" alt="Big Joe in breathwork" style="width:100%;height:100%;object-fit:cover;display:block;">
      </div>
      <div class="bb-reveal" style="grid-column:span 1;aspect-ratio:1/1;overflow:hidden;">
        <img src="/assets/images/gallery/practitioner-6.webp" alt="Big Joe close portrait" style="width:100%;height:100%;object-fit:cover;display:block;">
      </div>
      <div class="bb-reveal" style="grid-column:span 1;aspect-ratio:2/3;overflow:hidden;">
        <img src="/assets/images/gallery/practitioner-2.webp" alt="Big Joe full portrait" style="width:100%;height:100%;object-fit:cover;display:block;">
      </div>
      <div class="bb-reveal" style="grid-column:span 1;aspect-ratio:1/1;overflow:hidden;">
        <img src="/assets/images/gallery/practitioner-4.webp" alt="Big Joe at work" style="width:100%;height:100%;object-fit:cover;display:block;">
      </div>
    </div>

    <span class="bb-label bb-reveal" style="margin-bottom:var(--s-6);">The Practice</span>
    <hr class="bb-rule">
    <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4);margin-bottom:var(--s-16);">
      <div class="bb-reveal" style="grid-column:span 1;aspect-ratio:16/9;overflow:hidden;">
        <img src="/assets/images/gallery/practice-1.webp" alt="Group breathwork session" style="width:100%;height:100%;object-fit:cover;display:block;">
      </div>
      <div class="bb-reveal" style="grid-column:span 1;aspect-ratio:16/9;overflow:hidden;">
        <img src="/assets/images/gallery/practice-2.webp" alt="Group breathwork" style="width:100%;height:100%;object-fit:cover;display:block;">
      </div>
      <div class="bb-reveal" style="grid-column:span 1;aspect-ratio:2/3;overflow:hidden;grid-row:span 2;">
        <img src="/assets/images/gallery/practice-5.webp" alt="Breathwork participant" style="width:100%;height:100%;object-fit:cover;display:block;">
      </div>
      <div class="bb-reveal" style="grid-column:span 1;aspect-ratio:16/9;overflow:hidden;">
        <img src="/assets/images/gallery/practice-3.webp" alt="Session in progress" style="width:100%;height:100%;object-fit:cover;display:block;">
      </div>
      <div class="bb-reveal" style="grid-column:span 1;aspect-ratio:16/9;overflow:hidden;">
        <img src="/assets/images/gallery/practice-4.webp" alt="Group in breathwork" style="width:100%;height:100%;object-fit:cover;display:block;">
      </div>
      <div class="bb-reveal" style="grid-column:span 2;aspect-ratio:16/9;overflow:hidden;">
        <img src="/assets/images/gallery/practice-6.webp" alt="Breathwork group" style="width:100%;height:100%;object-fit:cover;display:block;">
      </div>
    </div>

    <span class="bb-label bb-reveal" style="margin-bottom:var(--s-6);">The Travel</span>
    <hr class="bb-rule">
    <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4);">
      <div class="bb-reveal" style="grid-column:span 2;aspect-ratio:16/9;overflow:hidden;">
        <img src="/assets/images/gallery/travel-1.webp" alt="Detroit Tour" style="width:100%;height:100%;object-fit:cover;display:block;">
      </div>
      <div class="bb-reveal" style="grid-column:span 1;aspect-ratio:1/1;overflow:hidden;">
        <img src="/assets/images/gallery/travel-4.webp" alt="Global session" style="width:100%;height:100%;object-fit:cover;display:block;">
      </div>
      <div class="bb-reveal" style="grid-column:span 1;aspect-ratio:16/9;overflow:hidden;">
        <img src="/assets/images/gallery/travel-2.webp" alt="Detroit Tour session" style="width:100%;height:100%;object-fit:cover;display:block;">
      </div>
      <div class="bb-reveal" style="grid-column:span 1;aspect-ratio:16/9;overflow:hidden;">
        <img src="/assets/images/gallery/travel-3.webp" alt="Detroit Tour group" style="width:100%;height:100%;object-fit:cover;display:block;">
      </div>
      <div class="bb-reveal" style="grid-column:span 1;aspect-ratio:16/9;overflow:hidden;">
        <img src="/assets/images/gallery/travel-5.webp" alt="Tour wide shot" style="width:100%;height:100%;object-fit:cover;display:block;">
      </div>
      <div class="bb-reveal" style="grid-column:span 3;aspect-ratio:16/6;overflow:hidden;">
        <img src="/assets/images/gallery/travel-6.webp" alt="Global breathwork" style="width:100%;height:100%;object-fit:cover;display:block;">
      </div>
    </div>
  </div>
</section>

<section class="bb-section bb-section--oat">
  <div class="bb-container bb-container--narrow" style="text-align:center;">
    <span class="bb-label bb-reveal">Ready</span>
    <hr class="bb-rule">
    <h2 class="bb-display bb-reveal" style="margin-bottom:var(--s-6);">Your session starts with one decision.</h2>
    <a href="/contact" class="bb-btn bb-reveal">Begin the Conversation</a>
  </div>
</section>

<?php require __DIR__ . '/../components/_footer.php'; ?>
