Gallery Rotated Section

<section class="ws-gallery bg-[var(--ws-gallery-bg)]">
  <div class="mx-auto grid max-w-7xl gap-14 px-6 py-16 lg:grid-cols-2 lg:items-center lg:py-24">

    <!-- Left: text content -->
    <div>
      <p class="mb-4 inline-flex rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-widest" style="background-color: var(--ws-color-bg-secondary); color: var(--ws-color-accent);">Our work</p>

      <h2 class="text-balance text-3xl font-bold tracking-tight text-[var(--ws-gallery-text)] sm:text-4xl">
        Creative solutions for forward-thinking brands.
      </h2>

      <p class="mt-4 max-w-lg text-pretty text-base text-[var(--ws-gallery-text-soft)]">
        We partner with ambitious teams to design and build digital products that people actually want to use. Here's a glimpse of what we've shipped.
      </p>

      <a href="#" class="mt-8 inline-flex rounded-xl px-6 py-3 text-sm font-semibold transition hover:opacity-90" style="background-color: var(--ws-color-accent); color: #fff;">View all projects</a><!-- ws-ok -->
    </div>

    <!-- Right: rotated image composition -->
    <div class="group relative flex items-center justify-center py-12">

      <!-- Decorative rotated square outline (behind) -->
      <div
        class="absolute rounded-2xl border-2 transition-transform duration-500 group-hover:rotate-3"
        style="inset: -16px; border-color: var(--ws-color-accent); transform: rotate(6deg); opacity: 0.4;"
        aria-hidden="true"
      ></div>

      <!-- Image grid container — rotates to 0 on hover -->
      <div class="relative grid w-full max-w-md grid-cols-2 gap-3 transition-transform duration-500 group-hover:[transform:rotate(0deg)]" style="transform: rotate(3deg);">

        <!-- Image 1 -->
        <div class="aspect-square overflow-hidden rounded-xl" style="background: linear-gradient(135deg, #6366f1, #8b5cf6);"><!-- ws-ok --></div>

        <!-- Image 2 -->
        <div class="aspect-square overflow-hidden rounded-xl" style="background: linear-gradient(135deg, var(--ws-color-accent), #f59e0b);"><!-- ws-ok --></div>

        <!-- Image 3 -->
        <div class="aspect-square overflow-hidden rounded-xl" style="background: linear-gradient(135deg, #10b981, #0ea5e9);"><!-- ws-ok --></div>

        <!-- Image 4 -->
        <div class="aspect-square overflow-hidden rounded-xl" style="background: linear-gradient(135deg, #ec4899, #a78bfa);"><!-- ws-ok --></div>

      </div>
    </div>

  </div>
</section>