Cards Promo Split

<div class="ws-cards mx-auto max-w-5xl px-6 py-10">
  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
    <!-- Promo card A — light, pricing callout -->
    <div class="relative flex flex-col overflow-hidden rounded-2xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] p-7 shadow-sm">
      <!-- Eyebrow label -->
      <p class="mb-3 text-xs font-bold uppercase tracking-[0.18em] text-[var(--ws-color-text-muted)]">Adobe Creative Cloud</p>
      <!-- Headline -->
      <h3 class="text-xl font-bold leading-snug text-[var(--ws-cards-text)]">
        50 % Rabatt auf Creative Cloud Pro.
      </h3>
      <!-- Body -->
      <p class="mt-2 text-sm leading-relaxed text-[var(--ws-cards-text-soft)]">
        Gestalte Content nach deinen Vorstellungen. In den ersten drei Monaten.
      </p>
      <!-- Pricing -->
      <div class="mt-4 flex items-baseline gap-2">
        <span class="text-sm text-[var(--ws-color-text-muted)] line-through">77,99 €</span>
        <span class="text-2xl font-black text-[var(--ws-cards-text)]">38,98 €</span>
        <span class="text-sm text-[var(--ws-color-text-muted)]">/Monat</span>
      </div>
      <!-- CTA -->
      <div class="mt-5">
        <a href="#" class="inline-flex rounded-full border border-[var(--ws-cards-border)] bg-transparent px-5 py-2 text-sm font-semibold text-[var(--ws-cards-text)] transition hover:bg-[var(--ws-color-surface-alt)]">
          Jetzt sparen
        </a>
      </div>
      <!-- Decorative product imagery area -->
      <div class="mt-6 -mx-7 -mb-7 h-36 overflow-hidden bg-gradient-to-br from-amber-50 to-orange-100 flex items-end justify-center">
        <!-- Stacked colored card shapes representing design outputs -->
        <div class="relative mb-0 flex translate-y-4 items-end gap-2 px-6">
          <div class="h-20 w-16 rotate-[-8deg] rounded-xl bg-gradient-to-br from-orange-400 to-yellow-300 shadow-lg"></div>
          <div class="h-24 w-20 rounded-xl bg-gradient-to-br from-violet-500 to-indigo-500 shadow-lg"></div>
          <div class="h-18 w-16 rotate-[6deg] rounded-xl bg-gradient-to-br from-sky-400 to-teal-400 shadow-lg"></div>
        </div>
      </div>
    </div>

    <!-- Promo card B — dark, AI product -->
    <div class="relative flex flex-col overflow-hidden rounded-2xl bg-[var(--ws-cards-bg)] border border-[var(--ws-cards-border)] p-7">
      <!-- Eyebrow label -->
      <p class="mb-3 text-xs font-bold uppercase tracking-[0.18em] text-[var(--ws-cards-text-muted)]">Adobe Firefly</p>
      <!-- Headline -->
      <h3 class="text-xl font-bold leading-snug text-[var(--ws-cards-text)]">
        Spare 50 % und generiere ohne Limit — bis zum 22. April.
      </h3>
      <!-- Body -->
      <p class="mt-2 text-sm leading-relaxed text-[var(--ws-cards-text-soft)]">
        Generiere Images mit ausgewählten Modellen und spare 50 % auf beliebte Firefly-Abos.
      </p>
      <!-- CTA -->
      <div class="mt-5">
        <a href="#" class="inline-flex rounded-full border border-[var(--ws-cards-border)] bg-transparent px-5 py-2 text-sm font-semibold text-[var(--ws-cards-text)] transition hover:bg-[var(--ws-color-surface-alt)]">
          Mehr erfahren
        </a>
      </div>
      <!-- AI image collage area -->
      <div class="mt-6 -mx-7 -mb-7 h-36 overflow-hidden">
        <div class="grid h-full grid-cols-3 grid-rows-2 gap-1 p-1">
          <div class="rounded-md bg-gradient-to-br from-pink-500 to-rose-600 row-span-2 col-span-1"></div>
          <div class="rounded-md bg-gradient-to-br from-violet-500 to-indigo-600"></div>
          <div class="rounded-md bg-gradient-to-br from-amber-400 to-orange-500"></div>
          <div class="rounded-md bg-gradient-to-br from-teal-400 to-emerald-500"></div>
          <div class="rounded-md bg-gradient-to-br from-sky-400 to-blue-600"></div>
        </div>
      </div>
    </div>
  </div>
</div>