<script lang="ts">
	import primewood from '$lib/assets/partenaires/primewood.png?width=600&webp';
	import machinex from '$lib/assets/partenaires/machinex.png?width=600&webp';
	import atocas from '$lib/assets/partenaires/atocas.png?width=600&webp';
	import usnr from '$lib/assets/partenaires/usnr.png?width=600&webp';
	import boisdaction from '$lib/assets/partenaires/boisdaction.png?width=600&webp';
	import jit from '$lib/assets/partenaires/jit.png?width=600&webp';
	import batteriesexpert from '$lib/assets/partenaires/batteriesexpert.png?width=600&webp';
	import carbotech from '$lib/assets/partenaires/carbotech.png?width=600&webp';
	import festivalduboeuf from '$lib/assets/partenaires/festivalduboeuf.png?width=600&webp';
	import mrc from '$lib/assets/partenaires/mrc.png?width=600&webp';
	import robovic from '$lib/assets/partenaires/robovic.png?width=600&webp';
	import ville from '$lib/assets/partenaires/ville.png?width=600&webp';
	import homedepot from '$lib/assets/partenaires/homedepot.png?width=600&webp';
	import manoir from '$lib/assets/partenaires/manoir.png?width=600&webp';
	import bombardier from '$lib/assets/partenaires/bombardier.png?width=600&webp';
	import hydroquebec from '$lib/assets/partenaires/hydroquebec.png?width=600&webp';
</script>

<div class="container">
	<article>
		<header>Platine</header>
		<div class="partenaires" id="platine">
			<img src={bombardier} alt="Fondation J Armand Bombardier" />
		</div>
	</article>
	<article>
		<header>Or</header>
		<div class="partenaires" id="or">
			<img src={atocas} alt="Atocas de l'érable" />
			<img src={hydroquebec} alt="Hydro Québec" />
			<img src={jit} alt="Jit Laser" />
			<img src={machinex} alt="Machinex" />
			<img src={usnr} alt="USNR" />
		</div>
	</article>
	<article>
		<header>Argent</header>
		<div class="partenaires" id="argent">
			<img src={primewood} alt="Primewood" />
			<img src={batteriesexpert} alt="Batteries Expert" />
			<img src={boisdaction} alt="Boisdaction" />
			<img src={carbotech} alt="Carbotech" />
			<img src={festivalduboeuf} alt="Festival du boeuf" />
			<img src={mrc} alt="MRC de l'érable" />
			<img src={robovic} alt="Robovic" />
			<img src={ville} alt="Ville de Plessisville" />
		</div>
	</article>
	<article>
		<header>Bronze</header>
		<div class="partenaires" id="bronze">
			<img src={homedepot} alt="Home Dépot" />
			<img src={manoir} alt="Manoir du Lac William" />
		</div>
	</article>
</div>

<style lang="scss">
	.partenaires {
		display: grid;
		column-gap: 20px;
		row-gap: 20px;
		align-items: stretch;
		justify-items: stretch;

		img {
			object-fit: contain;
			filter: drop-shadow(1px 1px 1px white) drop-shadow(-1px 1px 1px white)
				drop-shadow(1px -1px 1px white) drop-shadow(-1px -1px 1px white);
		}

		&#platine {
			grid-template-columns: repeat(1, 1fr);
		}
		&#or {
			grid-template-columns: repeat(2, 1fr);
		}
		&#argent {
			grid-template-columns: repeat(3, 1fr);
		}
		&#bronze {
			grid-template-columns: repeat(4, 1fr);
		}

		@media (min-width: 576px) {
			&#platine {
				grid-template-columns: repeat(1, 1fr);
			}
			&#or {
				grid-template-columns: repeat(3, 1fr);
			}
			&#argent {
				grid-template-columns: repeat(4, 1fr);
			}
			&#bronze {
				grid-template-columns: repeat(5, 1fr);
			}
		}
	}
</style>
