firq-dev-website/src/layouts/baseSection.astro

---
export interface Props {
	title: string;
}

const { title } = Astro.props;
---

<div>
    <h1>{title}</h1>
    <div>
        <slot />
    </div>
</div>

<style>
    div {
    	display: flex;
    	flex-direction: column;
    	justify-content: center;
    	text-align: center;
	}
    div > div {
    	row-gap: 1em;
    	column-gap: 1em;
    	justify-content: center;
    	align-self: center;
    	display: flex;
    	flex-flow: row wrap;
    	padding: 1em;
		position: relative;
	}
    div > h1 {
        color: white;
        margin: 0.5rem 0px 0.5rem 0.5em;
        padding: 0.25rem 0.75rem;
        width: max-content;
        background-color: var(--c-darkgray);
    }
	@media(min-width: 512px) {	
    	div {
    		row-gap: 1.5em;
    		column-gap: 1.5em;
    	}
	}
</style>