fix: icons page grid template issue

Author: stabldev

src/lib/components/header.svelte

@@ -36,7 +36,7 @@
 		z-index: 999;
 		top: 0;
 		inset-inline: 0;
-		padding-inline: 2rem;
+		padding-inline: 1rem;
 		height: var(--header-height);
 		backdrop-filter: blur(0.5rem);
 		background-color: color-mix(in srgb, var(--color-base-100) 90%, transparent);

src/routes/+page.svelte

@@ -135,7 +135,7 @@
 		flex: 1;
 		display: flex;
 		overflow: hidden;
-		padding-inline: 1rem;
+		padding: 1rem;
 	}
 
 	.hero-container {

src/routes/icons/+page.svelte

@@ -54,7 +54,7 @@
 </svelte:head>
 
 <Header />
-<div class="icons-container">
+<main>
 	<div class="links">
 		<a href="/">
 			<coreicons-shape-chevron variant="left"></coreicons-shape-chevron>
@@ -131,16 +131,17 @@
 		</span>
 		<span>Under the MIT license.</span>
 	</footer>
-</div>
+</main>
 
 <style>
-	.icons-container {
+	main {
 		margin-top: var(--header-height);
 		max-width: 35rem;
 		margin-inline: auto;
 		display: flex;
 		flex-direction: column;
 		gap: 1rem;
+		padding: 1rem;
 
 		.links {
 			display: flex;
@@ -223,9 +224,13 @@
 
 		.icons-grid-container {
 			display: grid;
-			grid-template-columns: repeat(8, 1fr);
+			grid-template-columns: repeat(6, 1fr);
 			gap: 0.5rem;
 
+			@media (width >= 40rem) {
+				grid-template-columns: repeat(8, 1fr);
+			}
+
 			button {
 				aspect-ratio: 1/1;
 				border-radius: 0.75rem;