Reduce feature page highlight box margins on small screens

Also, remove the medium font weight since it tends to look a little off or messy.
johnjago · Jul 23, 2024 · b847723 · b847723
1 parent 2eaf5d1
commit b847723
Showing 1 changed file with 3 additions and 3 deletions.
diff --git a/layouts/features/single.html b/layouts/features/single.html
@@ -1,13 +1,13 @@
 {{ define "main" }}
-<section class="pt-40 pb-24 px-8 text-center max-w-6xl mx-auto">
+<section class="pt-40 pb-12 md:pb-24 px-8 text-center max-w-6xl mx-auto">
 	<h1 class="text-4xl md:text-5xl md:!leading-[3.5rem] text-balance font-bold mb-8 text-transparent bg-clip-text bg-gradient-to-br from-[#9D6095] to-[#E8A04D]">{{ .Title }}</h1>
-	<p class="text-2xl mb-12 max-w-4xl font-medium mx-auto">{{ .Params.Subtitle }}</p>
+	<p class="text-2xl mb-12 max-w-4xl mx-auto">{{ .Params.Subtitle }}</p>
 	<img
 		src="{{ .Params.ImageURL }}"
 		alt="{{ .Params.ImageAlt }}"
 		class="{{ .Params.ImageClasses }} mx-auto rounded-lg shadow-2xl"
 	>
-	<div class="mt-24 grid sm:grid-cols-2 gap-4 text-left">
+	<div class="mt-20 md:mt-24 grid sm:grid-cols-2 gap-4 text-left">
 		{{ range .Params.highlights }}
 		<div class="p-4 bg-gray-100 rounded-lg">
 			<div class="flex mb-2">