<script lang="ts">
	import image1 from '$lib/assets/images/image1.jpg?width=600&webp';
	import image2 from '$lib/assets/images/image2.jpg?width=600&webp';
	import image3 from '$lib/assets/images/image3.jpg?width=600&webp';
</script>

<div class="container">
	<article>
		<header>Nous sommes</header>
		<content>
			<p>
				Une équipe de jeunes de 12 à 18 ans, encadrés par des mentors, participant à la compétition
				internationale de robotique FIRST. Notre défi consiste à concevoir et construire un robot
				performant dans un temps limité.
			</p>
			<div class="img" style="background-image: url('{image1}')" />
		</content>
	</article>

	<article>
		<header>Notre mission</header>
		<content>
			<div class="img" style="background-image: url('{image2}')" />
			<p>
				L'équipe PLS 5618 désire garantir aux élèves une expérience enrichissante et professionnelle
				en connaissances technologiques et personnelles dans un climat favorisant la confiance et
				l'autonomie. Le projet stimule l'intérêt envers les sciences et technologies tout en
				développant un sentiment d'appartenance envers l'équipe, l'école et la communauté.
			</p>
		</content>
	</article>

	<article>
		<header>Nos valeurs</header>
		<content>
			<ul>
				<li>Esprit d'équipe</li>
				<li>Organisation</li>
				<li>Connaissances</li>
				<li>Confiance en soi et envers les autres</li>
				<li>Plaisir</li>
				<li>Amitié</li>
			</ul>
			<div class="img" style="background-image: url('{image3}')" />
		</content>
	</article>

	<article id="links">
		<a href="/resultats" role="button">Voir nos résultats</a>
		<a href="/partenaires" role="button">Voir nos partenaires</a>
	</article>
</div>

<style lang="scss">
	content {
		display: flex;
		flex-flow: row;
		gap: 30px;
		flex-grow: 1;
		flex-basis: 0;
		justify-content: space-between;
	}

	.img {
		width: 50%;
		background-size: cover;
		background-position: center;
		//height: auto;
	}

	p {
		width: 50%;
	}

	#links {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-evenly;
		gap: 10px;
	}

	@media (max-width: 640px) {
		.img {
			display: none;
		}
		p {
			width: 100%;
		}
	}
</style>
