Standard Width Component

<script>
	let { children, backgroundColour, rowGap, paddingTopBottom } = $props();
</script>

<div style:background-color={`var(${backgroundColour})`} style="padding: {paddingTopBottom} 0svw;">
	<div style:row-gap={rowGap}>
		{@render children?.()}
	</div>
</div>

<style>
	div {
		display: flex;
		align-items: center;
		flex-direction: column;
	}
	div > div {
		max-width: 96svw;
		padding: 1svb 0svw;
	}
</style>

Summary

This ensures that all components have a standard width when required to ensure continuity

Expects

children - This is the HTML, CSS and JavaScript that a parent would want to insert and have a standard width of

backgroundColour - One of the variable colours that are are in the :root or at the globals.css

rowGap - How much space would multiple items have between each other

paddingTopBottom - How much padding should the top and bottom or the space between outside elements

Example Use

<StdFromSide backgroundColour="--BajaBlack" rowGap="6svh" paddingTopBottom="4svh">
	<div>
		<img
			alt="Our Car waiting in line for endurance"
			src="https://res.cloudinary.com/dpgrgsh7g/image/upload/c_fill,w_400,h_400/v1755376324/PXL_20250503_154645931-min_gi8qlf.jpg"
		/>
		<div>
			<h3>Sponsor Us</h3>
			<p>
				We appreciate all the help we get from sponsors, as it helps fund our Baja team with
				essential parts, materials, manufacturing support, and ability to go to competitions. From
				donated components to financial backing, our sponsors are a key part of what drives our team
				forward.
			</p>
			<a href="/OurSponsors">Learn More</a>
		</div>
	</div>
	<div id="HomeBottomGallery">
		<img
			alt="The Baja Car doing a massive jump"
			src="https://res.cloudinary.com/dpgrgsh7g/image/upload/v1756589650/DSC_0970-min_telnpf_c_fill_w_780_h_400_o4vqdc.jpg"
		/>
	</div>
</StdFromSide>