03 - 横長の申し込みCTA

---
import DemoLayout from '@/layouts/DemoLayout.astro';

import { Container, Frame, Layer, Media, Stack, Text, WithSide } from 'lism-css/astro';
import { Button } from '@lism-css/ui/astro/Button';
---

<DemoLayout title="03 - 横長の申し込みCTA">
  <Container as="section" isWrapper="l" p="30">
    <WithSide pos="relative" ov="hidden" g="40" ai="center" sideW="auto" mainW="xs" c="white" px="35" py="45" bxsh="10" bdrs="20">
      {/* 背景写真とオーバーレイ。コンテンツは pos="relative" で前面に出す */}
      <Frame isLayer>
        <Media src="https://images.unsplash.com/photo-1669295384050-a1d4357bd1d7?auto=format&fit=max&w=1920&q=80" alt="" width="960" height="640" />
      </Frame>
      <Layer bgc="black:50%" />
      <Stack pos="relative" g="30">
        <Text class="u--trim" fz="2xl">
          <span class="-d:inline-block">14日間の</span><span class="-d:inline-block">無料トライアル</span>
        </Text>
        <Text>すべての機能をお試しいただけます。クレジットカード不要・いつでも解約可能。</Text>
      </Stack>
      <Button isSide pos="relative" href="#" fw="bold" lts="l" bgc="white" c="black" px="40" py="20" bdrs="99">無料で試してみる</Button>
    </WithSide>
  </Container>
</DemoLayout>