Property Listing Base

<section class="ws-property-listing bg-[var(--ws-property-listing-bg)] py-16">
  <div class="mx-auto max-w-6xl px-6">
    <article>
      <!-- Image Grid -->
      <div class="grid grid-cols-1 gap-3 sm:grid-cols-3 sm:grid-rows-2">
        <div class="sm:col-span-2 sm:row-span-2">
          <div class="h-64 w-full rounded-xl bg-gradient-to-br from-slate-200 to-slate-300 dark:from-slate-700 dark:to-slate-800 sm:h-full" aria-label="Main property photo"></div>
        </div>
        <div>
          <div class="h-40 w-full rounded-xl bg-gradient-to-br from-blue-100 to-slate-200 dark:from-blue-900/30 dark:to-slate-800 sm:h-full" aria-label="Property photo 2"></div>
        </div>
        <div>
          <div class="h-40 w-full rounded-xl bg-gradient-to-br from-emerald-100 to-slate-200 dark:from-emerald-900/30 dark:to-slate-800 sm:h-full" aria-label="Property photo 3"></div>
        </div>
      </div>

      <!-- Title & Address -->
      <div class="mt-8">
        <h1 class="text-3xl font-bold text-slate-900">Modern Loft Apartment with City Views</h1>
        <p class="mt-2 text-lg text-slate-500">Schönhauser Allee 42, 10435 Berlin Prenzlauer Berg</p>
      </div>

      <!-- Attribute Strip -->
      <dl class="mt-6 flex flex-wrap gap-6 border-y border-slate-200 py-4">
        <div class="flex items-center gap-2">
          <svg class="h-5 w-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-4 0h4"/></svg>
          <div>
            <dt class="sr-only">Bedrooms</dt>
            <dd class="text-sm font-semibold text-slate-900">3 Beds</dd>
          </div>
        </div>
        <div class="flex items-center gap-2">
          <svg class="h-5 w-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M4 12h16M6 12V8a4 4 0 018 0v4"/></svg>
          <div>
            <dt class="sr-only">Bathrooms</dt>
            <dd class="text-sm font-semibold text-slate-900">2 Baths</dd>
          </div>
        </div>
        <div class="flex items-center gap-2">
          <svg class="h-5 w-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5"/></svg>
          <div>
            <dt class="sr-only">Area</dt>
            <dd class="text-sm font-semibold text-slate-900">120 m²</dd>
          </div>
        </div>
        <div class="flex items-center gap-2">
          <svg class="h-5 w-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
          <div>
            <dt class="sr-only">Year Built</dt>
            <dd class="text-sm font-semibold text-slate-900">Built 2020</dd>
          </div>
        </div>
      </dl>

      <!-- 2-Column Layout -->
      <div class="mt-10 grid grid-cols-1 gap-10 lg:grid-cols-3">
        <!-- Left: Description + Features -->
        <div class="lg:col-span-2">
          <h2 class="text-xl font-bold text-slate-900">About this property</h2>
          <div class="mt-4 space-y-4 text-slate-600">
            <p>This stunning loft apartment is located in the heart of Prenzlauer Berg, one of Berlin's most desirable neighborhoods. Floor-to-ceiling windows flood the open-plan living area with natural light, offering panoramic views of the city skyline.</p>
            <p>The modern kitchen features premium appliances and a breakfast bar. The primary bedroom includes an en-suite bathroom with rainfall shower and heated floors. Two additional bedrooms provide flexibility for a home office or guest room.</p>
          </div>

          <h3 class="mt-8 text-lg font-semibold text-slate-900">Features</h3>
          <ul class="mt-4 grid grid-cols-1 gap-2 sm:grid-cols-2">
            <li class="flex items-center gap-2 text-sm text-slate-600">
              <svg class="h-4 w-4 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
              Floor-to-ceiling windows
            </li>
            <li class="flex items-center gap-2 text-sm text-slate-600">
              <svg class="h-4 w-4 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
              Underfloor heating
            </li>
            <li class="flex items-center gap-2 text-sm text-slate-600">
              <svg class="h-4 w-4 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
              Private balcony
            </li>
            <li class="flex items-center gap-2 text-sm text-slate-600">
              <svg class="h-4 w-4 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
              Elevator access
            </li>
            <li class="flex items-center gap-2 text-sm text-slate-600">
              <svg class="h-4 w-4 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
              Secure underground parking
            </li>
            <li class="flex items-center gap-2 text-sm text-slate-600">
              <svg class="h-4 w-4 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
              Energy rating A+
            </li>
          </ul>
        </div>

        <!-- Right: Sticky Sidebar -->
        <aside class="lg:sticky lg:top-8 lg:self-start">
          <div class="rounded-2xl border border-slate-200 bg-[var(--ws-color-surface)] p-6 shadow-sm">
            <p class="text-3xl font-bold text-slate-900">€485,000</p>
            <p class="mt-1 text-sm text-slate-500">Est. €1,850/mo mortgage</p>

            <a href="#" class="mt-6 block w-full rounded-xl bg-indigo-600 px-6 py-3 text-center text-sm font-semibold text-white transition hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-slate-800">Schedule Viewing</a>

            <hr class="my-6 border-slate-200">

            <!-- Agent Card -->
            <div class="flex items-center gap-3">
              <div class="h-12 w-12 shrink-0 rounded-full bg-gradient-to-br from-indigo-200 to-blue-300 dark:from-indigo-700 dark:to-blue-800" aria-hidden="true"></div>
              <div>
                <p class="text-sm font-semibold text-slate-900">Anna Schneider</p>
                <p class="text-xs text-slate-500">Berlin Realty Group</p>
              </div>
            </div>
            <a href="tel:+4930123456" class="mt-4 block w-full rounded-xl border border-slate-200 px-6 py-2.5 text-center text-sm font-medium text-slate-700 transition hover:bg-slate-50 dark:hover:bg-slate-700">Call Agent</a>
          </div>
        </aside>
      </div>
    </article>
  </div>
</section>