diff --git a/pages/articles/[...slug].js b/pages/articles/[...slug].js
index a11d5d13..3d8d71d3 100644
--- a/pages/articles/[...slug].js
+++ b/pages/articles/[...slug].js
@@ -73,7 +73,7 @@ export default function Blog({ post, authorDetails, prev, next, jobs, events, se
             events={events}
           />
 
-          <div className="container mx-auto space-y-2 pt-6 pb-8 md:space-y-5">
+          <div className="container mx-auto space-y-2 pb-8 pt-6 md:space-y-5">
             <h2 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
               Jobs
             </h2>
diff --git a/pages/book-a-talk.js b/pages/book-a-talk.js
index f3527af5..947a873d 100644
--- a/pages/book-a-talk.js
+++ b/pages/book-a-talk.js
@@ -57,9 +57,9 @@ export default function Talks({ talks, authors, highlightedAuthors }) {
     <>
       <PageSEO title="Book a talk" description={siteMetadata.description} />
       <section className={`bg-io_${theme}-500`}>
-        <div className="container mx-auto pt-8 pb-24 md:pb-32">
+        <div className="container mx-auto pb-24 pt-8 md:pb-32">
           <div className="grid grid-cols-12">
-            <div className="col-start-1 col-end-12 md:col-end-8 md:mt-4 md:mb-10 xl:row-start-1 xl:mt-12 xl:mb-8">
+            <div className="col-start-1 col-end-12 md:col-end-8 md:mb-10 md:mt-4 xl:row-start-1 xl:mb-8 xl:mt-12">
               <h1 className="text-4xl md:text-5xl xl:text-7xl">
                 Ready to be <span className="font-serif font-light">inspired</span>?
               </h1>
@@ -67,7 +67,7 @@ export default function Talks({ talks, authors, highlightedAuthors }) {
                 Discover captivating talks that will ignite your mind!
               </p>
             </div>
-            <div className="col-start-1 col-end-12 mt-10 mb-8 grid grid-cols-2 gap-y-4 md:col-start-9 md:col-end-13 md:row-start-1 md:row-end-4 md:mb-0 xl:col-start-9 xl:row-start-1">
+            <div className="col-start-1 col-end-12 mb-8 mt-10 grid grid-cols-2 gap-y-4 md:col-start-9 md:col-end-13 md:row-start-1 md:row-end-4 md:mb-0 xl:col-start-9 xl:row-start-1">
               {highlightedAuthors.map((author) => (
                 <Contributor key={author.slug[0]} contributor={author} link={false} />
               ))}
@@ -92,7 +92,7 @@ export default function Talks({ talks, authors, highlightedAuthors }) {
       <SectionTitle>
         Some of our <span className="font-serif font-light">most popular</span> talks
       </SectionTitle>
-      <div className="container mx-auto pt-10 pb-4 lg:pt-16">
+      <div className="container mx-auto pb-4 pt-10 lg:pt-16">
         <ul className="grid gap-y-10 md:gap-x-4 lg:grid-cols-2 lg:gap-y-12 xl:grid-cols-3 xl:gap-x-6">
           {talks.map((talk) => {
             const talkAuthors = talk.authors.map((author) => authors[author])
@@ -104,7 +104,7 @@ export default function Talks({ talks, authors, highlightedAuthors }) {
         <Link
           href="/talks"
           aria-label="all talks"
-          className="relative inline-flex rounded-full border border-black py-4 px-9 text-base font-bold leading-none transition-colors delay-100 hover:bg-black hover:text-white"
+          className="relative inline-flex rounded-full border border-black px-9 py-4 text-base font-bold leading-none transition-colors delay-100 hover:bg-black hover:text-white"
         >
           <span>All Talks</span>
           <Arrow className="ml-4 w-6" />
diff --git a/pages/devoxx-23-quiz-front-end.js b/pages/devoxx-23-quiz-front-end.js
index 2d099ab0..b00ca53f 100644
--- a/pages/devoxx-23-quiz-front-end.js
+++ b/pages/devoxx-23-quiz-front-end.js
@@ -17,9 +17,9 @@ export default function DevoxxFrontend() {
       <PageSEO title="Devoxx Quiz - Front-end" description={siteMetadata.description} />
 
       <section className={`bg-io_${theme}-500`}>
-        <div className="container mx-auto pt-8 pb-24 md:pb-32">
+        <div className="container mx-auto pb-24 pt-8 md:pb-32">
           <div className="grid grid-cols-12">
-            <div className="col-start-1 col-end-12 mb-8 md:col-end-8 md:mt-4 md:mb-10 xl:row-start-1 xl:mt-12 xl:mb-16">
+            <div className="col-start-1 col-end-12 mb-8 md:col-end-8 md:mb-10 md:mt-4 xl:row-start-1 xl:mb-16 xl:mt-12">
               <h1 className="text-4xl md:text-5xl xl:text-5xl">
                 The iO <span className="font-serif font-light">Front-end developer</span> quiz
               </h1>
diff --git a/pages/devoxx-23-quiz-java.js b/pages/devoxx-23-quiz-java.js
index cb560e86..0f470540 100644
--- a/pages/devoxx-23-quiz-java.js
+++ b/pages/devoxx-23-quiz-java.js
@@ -17,9 +17,9 @@ export default function DevoxxJava() {
       <PageSEO title="Devoxx Quiz - Java" description={siteMetadata.description} />
 
       <section className={`bg-io_${theme}-500`}>
-        <div className="container mx-auto pt-8 pb-24 md:pb-32">
+        <div className="container mx-auto pb-24 pt-8 md:pb-32">
           <div className="grid grid-cols-12">
-            <div className="col-start-1 col-end-12 mb-8 md:col-end-8 md:mt-4 md:mb-10 xl:row-start-1 xl:mt-12 xl:mb-16">
+            <div className="col-start-1 col-end-12 mb-8 md:col-end-8 md:mb-10 md:mt-4 xl:row-start-1 xl:mb-16 xl:mt-12">
               <h1 className="text-4xl md:text-5xl xl:text-6xl">
                 The iO <span className="font-serif font-light">Java developer</span> quiz
               </h1>
diff --git a/pages/experiments.js b/pages/experiments.js
index d578a6c3..0b38f8f5 100644
--- a/pages/experiments.js
+++ b/pages/experiments.js
@@ -34,9 +34,9 @@ export default function Experiments({ experiments }) {
         description={siteMetadata.description}
       />
       <section className={`bg-io_${theme}-500`}>
-        <div className="container mx-auto pt-8 pb-24 md:pb-32">
+        <div className="container mx-auto pb-24 pt-8 md:pb-32">
           <div className="grid grid-cols-12">
-            <div className="col-start-1 col-end-12 mb-8 md:col-end-8 md:mt-4 md:mb-10 xl:row-start-1 xl:mt-12 xl:mb-16">
+            <div className="col-start-1 col-end-12 mb-8 md:col-end-8 md:mb-10 md:mt-4 xl:row-start-1 xl:mb-16 xl:mt-12">
               <h1 className="text-4xl md:text-5xl xl:text-7xl">
                 Don't you just love experimenting with{' '}
                 <span className="font-serif font-light">code?</span>
diff --git a/pages/index.js b/pages/index.js
index 99e86a14..48433299 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -94,19 +94,19 @@ export default function Home({ posts, videos, jobs, events, contributors }) {
             <ul className="col-span-full md:col-span-6 md:row-start-3 xl:col-span-3 xl:row-start-1">
               <li className="mb-4 flex items-center last:mb-0">
                 <a href="#articles">Our latest articles</a>
-                <Arrow className="mt-1 ml-2 rotate-90" />
+                <Arrow className="ml-2 mt-1 rotate-90" />
               </li>
               <li className="mb-4 flex items-center last:mb-0">
                 <a href="#videos">Our latest videos</a>
-                <Arrow className="mt-1 ml-2 rotate-90" />
+                <Arrow className="ml-2 mt-1 rotate-90" />
               </li>
               <li className="mb-4 flex items-center last:mb-0">
                 <a href="#people">Our writers &amp; speakers</a>
-                <Arrow className="mt-1 ml-2 rotate-90" />
+                <Arrow className="ml-2 mt-1 rotate-90" />
               </li>
               <li className="mb-4 flex items-center last:mb-0">
                 <a href="#jobs">Some of our jobs</a>
-                <Arrow className="mt-1 ml-2 rotate-90" />
+                <Arrow className="ml-2 mt-1 rotate-90" />
               </li>
             </ul>
           </div>
@@ -145,7 +145,7 @@ export default function Home({ posts, videos, jobs, events, contributors }) {
           <Link
             href="/articles"
             aria-label="all posts"
-            className="relative inline-flex rounded-full border border-black py-4 px-9 text-base font-bold leading-none transition-colors delay-100 hover:bg-black hover:text-white"
+            className="relative inline-flex rounded-full border border-black px-9 py-4 text-base font-bold leading-none transition-colors delay-100 hover:bg-black hover:text-white"
           >
             <span>All Posts</span>
             <Arrow className="ml-4 w-6" />
diff --git a/pages/jfall-24-quiz-java.js b/pages/jfall-24-quiz-java.js
index 4780fc77..671473cb 100644
--- a/pages/jfall-24-quiz-java.js
+++ b/pages/jfall-24-quiz-java.js
@@ -17,9 +17,9 @@ export default function DevoxxJava() {
       <PageSEO title="J-Fall Quiz - Java" description={siteMetadata.description} />
 
       <section className={`bg-io_${theme}-500`}>
-        <div className="container mx-auto pt-8 pb-24 md:pb-32">
+        <div className="container mx-auto pb-24 pt-8 md:pb-32">
           <div className="grid grid-cols-12">
-            <div className="col-start-1 col-end-12 mb-8 md:col-end-8 md:mt-4 md:mb-10 xl:row-start-1 xl:mt-12 xl:mb-16">
+            <div className="col-start-1 col-end-12 mb-8 md:col-end-8 md:mb-10 md:mt-4 xl:row-start-1 xl:mb-16 xl:mt-12">
               <h1 className="text-4xl md:text-5xl xl:text-6xl">
                 The iO <span className="font-serif font-light">Java developer</span> quiz
               </h1>
diff --git a/pages/series/[...slug].js b/pages/series/[...slug].js
index c8d2d3b4..78b53f38 100644
--- a/pages/series/[...slug].js
+++ b/pages/series/[...slug].js
@@ -76,7 +76,7 @@ export default function Serie({ posts, authorDetails, prev, next, jobs, events,
             events={events}
           />
 
-          <div className="container mx-auto space-y-2 pt-6 pb-8 md:space-y-5">
+          <div className="container mx-auto space-y-2 pb-8 pt-6 md:space-y-5">
             <h2 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
               Jobs
             </h2>
diff --git a/pages/tags.js b/pages/tags.js
index 6491fdb4..906fbfec 100644
--- a/pages/tags.js
+++ b/pages/tags.js
@@ -19,9 +19,9 @@ export default function Tags({ tags }) {
     <>
       <PageSEO title={`Tags - ${siteMetadata.author}`} description="Things I blog about" />
       <section className={`bg-io_${theme}-500`}>
-        <div className="container mx-auto pt-8 pb-24 md:pb-32">
+        <div className="container mx-auto pb-24 pt-8 md:pb-32">
           <div className="grid grid-cols-12">
-            <div className="col-start-1 col-end-12 mb-8 md:col-end-8 md:mt-4 md:mb-10 xl:row-start-1 xl:mt-12 xl:mb-16">
+            <div className="col-start-1 col-end-12 mb-8 md:col-end-8 md:mb-10 md:mt-4 xl:row-start-1 xl:mb-16 xl:mt-12">
               <h1 className="text-4xl md:text-5xl xl:text-7xl">
                 We write and talk about a lot of{' '}
                 <span className="font-serif font-light">different topics</span>. Check them out!
@@ -35,7 +35,7 @@ export default function Tags({ tags }) {
           {Object.keys(tags).length === 0 && 'No tags found.'}
           {sortedTags.map((t) => {
             return (
-              <div key={t} className="mt-2 mb-2 mr-5">
+              <div key={t} className="mb-2 mr-5 mt-2">
                 <Tag text={t} />
                 <Link
                   href={`/tags/${kebabCase(t)}`}
diff --git a/pages/talks.js b/pages/talks.js
index 5cf43a95..451ad91f 100644
--- a/pages/talks.js
+++ b/pages/talks.js
@@ -23,9 +23,9 @@ export default function Talks({ talks, authors }) {
     <>
       <PageSEO title={`Talks - ${siteMetadata.author}`} description={siteMetadata.description} />
       <section className={`bg-io_${theme}-500`}>
-        <div className="container mx-auto pt-8 pb-24 md:pb-32">
+        <div className="container mx-auto pb-24 pt-8 md:pb-32">
           <div className="grid grid-cols-12">
-            <div className="col-start-1 col-end-12 mb-8 md:col-end-8 md:mt-4 md:mb-10 xl:row-start-1 xl:mt-12 xl:mb-16">
+            <div className="col-start-1 col-end-12 mb-8 md:col-end-8 md:mb-10 md:mt-4 xl:row-start-1 xl:mb-16 xl:mt-12">
               <h1 className="text-4xl md:text-5xl xl:text-7xl">
                 Looking for an <span className="font-serif font-light">inspiring talk</span> at your
                 event?
diff --git a/pages/talks/[slug].js b/pages/talks/[slug].js
index 18fb8496..2898b7d6 100644
--- a/pages/talks/[slug].js
+++ b/pages/talks/[slug].js
@@ -45,7 +45,7 @@ export default function Talk({ talk, authors }) {
       <PageSEO title={`${talk.title} - ${author.name}`} description={talk.summary} />
 
       <section className={`bg-io_${theme}-500`}>
-        <div className="container mx-auto pt-8 pb-12">
+        <div className="container mx-auto pb-12 pt-8">
           <div className="grid grid-cols-12">
             <div className="col-start-1 col-end-12 mb-8 flex flex-col text-center md:col-start-9 md:col-end-13 md:row-start-1 md:row-end-4 md:mb-0 xl:col-start-9 xl:row-start-1">
               <Image
@@ -67,7 +67,7 @@ export default function Talk({ talk, authors }) {
               </div>
             </div>
 
-            <div className="col-start-1 col-end-12 mb-8 md:col-end-8 md:mt-4 md:mb-10 xl:row-start-1 xl:mt-12 xl:mb-16">
+            <div className="col-start-1 col-end-12 mb-8 md:col-end-8 md:mb-10 md:mt-4 xl:row-start-1 xl:mb-16 xl:mt-12">
               <h1 className="mb-2 text-4xl md:text-5xl xl:text-7xl">
                 <MarkdownRenderer markdown={talk.title} />
               </h1>
diff --git a/pages/videos.js b/pages/videos.js
index 21498b73..a3ca24e8 100644
--- a/pages/videos.js
+++ b/pages/videos.js
@@ -18,9 +18,9 @@ export default function Videos({ videos }) {
       <PageSEO title={`Videos - ${siteMetadata.author}`} description={siteMetadata.description} />
 
       <section className={`bg-io_${theme}-500`}>
-        <div className="container mx-auto pt-8 pb-24 md:pb-32">
+        <div className="container mx-auto pb-24 pt-8 md:pb-32">
           <div className="grid grid-cols-12">
-            <div className="col-start-1 col-end-12 mb-8 md:col-end-8 md:mt-4 md:mb-10 xl:row-start-1 xl:mt-12 xl:mb-16">
+            <div className="col-start-1 col-end-12 mb-8 md:col-end-8 md:mb-10 md:mt-4 xl:row-start-1 xl:mb-16 xl:mt-12">
               <h1 className="text-4xl md:text-5xl xl:text-7xl">
                 Check out our videos from{' '}
                 <span className="font-serif font-light">meetups and expert talks</span>
diff --git a/pages/videos/[slug].js b/pages/videos/[slug].js
index 2171a590..99771c48 100644
--- a/pages/videos/[slug].js
+++ b/pages/videos/[slug].js
@@ -58,7 +58,7 @@ export default function Video({ video }) {
           </div>
 
           <div className="-mt-20 translate-y-32 md:-mt-64 md:translate-y-72">
-            <div className="aspect-w-16 aspect-h-9 my-10">
+            <div className="aspect-h-9 aspect-w-16 my-10">
               <iframe
                 src={`https://www.youtube.com/embed/${video.id}`}
                 title="YouTube video player"
diff --git a/pages/workshops.js b/pages/workshops.js
index b906e96d..4827837f 100644
--- a/pages/workshops.js
+++ b/pages/workshops.js
@@ -26,9 +26,9 @@ export default function Workshops({ workshops, authors }) {
         description={siteMetadata.description}
       />
       <section className={`bg-io_${theme}-500`}>
-        <div className="container mx-auto pt-8 pb-24 md:pb-32">
+        <div className="container mx-auto pb-24 pt-8 md:pb-32">
           <div className="grid grid-cols-12">
-            <div className="col-start-1 col-end-12 mb-8 md:col-end-8 md:mt-4 md:mb-10 xl:row-start-1 xl:mt-12 xl:mb-16">
+            <div className="col-start-1 col-end-12 mb-8 md:col-end-8 md:mb-10 md:mt-4 xl:row-start-1 xl:mb-16 xl:mt-12">
               <h1 className="text-4xl md:text-5xl xl:text-7xl">
                 Looking for an <span className="font-serif font-light">inspiring workshop</span> for
                 your people?
diff --git a/pages/workshops/[slug].js b/pages/workshops/[slug].js
index fad19885..c095cefe 100644
--- a/pages/workshops/[slug].js
+++ b/pages/workshops/[slug].js
@@ -45,7 +45,7 @@ export default function Workshop({ workshop, authors }) {
       <PageSEO title={`${workshop.title} - ${author.name}`} description={workshop.summary} />
 
       <section className={`bg-io_${theme}-500`}>
-        <div className="container mx-auto pt-8 pb-12">
+        <div className="container mx-auto pb-12 pt-8">
           <div className="grid grid-cols-12">
             <div className="col-start-1 col-end-12 mb-8 flex flex-col text-center md:col-start-9 md:col-end-13 md:row-start-1 md:row-end-4 md:mb-0 xl:col-start-9 xl:row-start-1">
               <Image
@@ -67,7 +67,7 @@ export default function Workshop({ workshop, authors }) {
               </div>
             </div>
 
-            <div className="col-start-1 col-end-12 mb-8 md:col-end-8 md:mt-4 md:mb-10 xl:row-start-1 xl:mt-12 xl:mb-16">
+            <div className="col-start-1 col-end-12 mb-8 md:col-end-8 md:mb-10 md:mt-4 xl:row-start-1 xl:mb-16 xl:mt-12">
               <h1 className="mb-2 text-4xl md:text-5xl xl:text-7xl">
                 <MarkdownRenderer markdown={workshop.title} />
               </h1>