Information003

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

import { Container, Frame, Grid, Media, Stack, HTML, Flex, Flow } from 'lism-css/astro';
import Button from '@/components/ex/Button/index.astro';
import './_style.css';
---

<DemoLayout title='Information003'>
	<Container isWrapper='m' bgc='base' py='50' hasGutter>
		<Stack g='20' ai='center' mb='40'>
			<HTML.h lv='2' class='u-trim' fz='2xl' fw='bold'>店舗一覧</HTML.h>
			<HTML.p class='u-trim' fz='s' ta='center' o='-20'>Shop List</HTML.p>
		</Stack>
		<Stack>
			<Grid gtc={['auto', null, 'minmax(auto, 300px) 1fr']} g='40' py='40' bd-y-e>
				<Frame tag='figure' ar='4/3' bdrs='10'>
					<Media src='https://cdn.lism-css.com/img/random-2510?category=room&r=1' alt='' />
				</Frame>
				<Stack g='20'>
					<HTML.p class='u-trim' fz='l' fw='bold' lts='l'>東京本店</HTML.p>
					<Stack fz='s' g='0'>
						<p>〒150-0001 東京都渋谷区神宮前1-1-1-1</p>
						<p>TEL: 03-1234-5678</p>
						<p>営業時間: 10:00 - 20:00</p>
						<p>定休日: 水曜日</p>
					</Stack>
					<Flex jc='fe' my-s='auto' g='20'>
						<Button href='#' fz='s' bdrs='10'>
							<HTML.span gc='1'>Web Site</HTML.span>
						</Button>
						<Button variant='outline' href='#' fz='s' bdrs='10'>Google Map</Button>
					</Flex>
				</Stack>
			</Grid>
			<Grid gtc={['auto', null, 'minmax(auto, 300px) 1fr']} g='40' py='40' bd-y-e>
				<Frame tag='figure' ar='4/3' bdrs='10'>
					<Media src='https://cdn.lism-css.com/img/random-2510?category=room&r=2' alt='' />
				</Frame>
				<Stack g='20'>
					<HTML.p class='u-trim' fz='l' fw='bold' lts='l'>大阪支店</HTML.p>
					<Stack fz='s'>
						<p>〒530-0001 大阪府大阪市北区梅田1-1-1-1</p>
						<p>TEL: 06-1234-5678</p>
						<p>営業時間: 10:00 - 20:00</p>
						<p>定休日: 水曜日</p>
					</Stack>
					<Flex jc='fe' my-s='auto' g='20'>
						<Button href='#' fz='s' bdrs='10'>
							<HTML.span gc='1'>Web Site</HTML.span>
						</Button>
						<Button variant='outline' href='#' fz='s' bdrs='10'>Google Map</Button>
					</Flex>
				</Stack>
			</Grid>
			<Grid gtc={['auto', null, 'minmax(auto, 300px) 1fr']} g='40' py='40' bd-y-e>
				<Frame tag='figure' ar='4/3' bdrs='10'>
					<Media src='https://cdn.lism-css.com/img/random-2510?category=room&r=3' alt='' />
				</Frame>
				<Stack g='20'>
					<HTML.p class='u-trim' fz='l' fw='bold' lts='l'>福岡支店</HTML.p>
					<Stack fz='s'>
						<p>〒810-0001 福岡県福岡市中央区天神1-1-1-1</p>
						<p>TEL: 092-1234-5678</p>
						<p>営業時間: 10:00 - 20:00</p>
						<p>定休日: 水曜日</p>
					</Stack>
					<Flex jc='fe' my-s='auto' g='20'>
						<Button variant='outline' href='#' fz='s' bdrs='10'>Google Map</Button>
					</Flex>
				</Stack>
			</Grid>
		</Stack>
	</Container>
</DemoLayout>