diff --git a/.gitignore b/.gitignore
index aa42ccb..9472046 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,4 +2,5 @@
 /vendor
 package-lock.json
 composer.lock
-style.css.map
\ No newline at end of file
+style.css.map
+.DS_Store
\ No newline at end of file
diff --git a/README.md b/README.md
index 0702a92..57856d9 100644
--- a/README.md
+++ b/README.md
@@ -13,7 +13,7 @@ My ultra-minimal CSS might make me look like theme tartare but that means less s
 * Custom template tags in `inc/template-tags.php` that keep your templates clean and neat and prevent code duplication.
 * Some small tweaks in `inc/template-functions.php` that can improve your theming experience.
 * A script at `js/navigation.js` that makes your menu a toggled dropdown on small screens (like your phone), ready for CSS artistry. It's enqueued in `functions.php`.
-* 2 sample layouts in `sass/layout/` made using CSS Grid for a sidebar on either side of your content. Just uncomment the layout of your choice in `sass/site/_site.scss`.
+* 2 sample layouts in `sass/layouts/` made using CSS Grid for a sidebar on either side of your content. Just uncomment the layout of your choice in `sass/style.scss`.
 Note: `.no-sidebar` styles are automatically loaded.
 * Smartly organized starter CSS in `style.css` that will help you to quickly get your design off the ground.
 * Full support for `WooCommerce plugin` integration with hooks in `inc/woocommerce.php`, styling override woocommerce.css with product gallery features (zoom, swipe, lightbox) enabled.
diff --git a/sass/abstracts/_abstracts.scss b/sass/abstracts/_abstracts.scss
new file mode 100644
index 0000000..45a0daa
--- /dev/null
+++ b/sass/abstracts/_abstracts.scss
@@ -0,0 +1,5 @@
+@import "variables/colors";
+@import "variables/typography";
+@import "variables/structure";
+@import "variables/columns";
+@import "mixins/mixins";
diff --git a/sass/mixins/_mixins-master.scss b/sass/abstracts/mixins/_mixins.scss
similarity index 100%
rename from sass/mixins/_mixins-master.scss
rename to sass/abstracts/mixins/_mixins.scss
diff --git a/sass/variables-site/_colors.scss b/sass/abstracts/variables/_colors.scss
similarity index 100%
rename from sass/variables-site/_colors.scss
rename to sass/abstracts/variables/_colors.scss
diff --git a/sass/variables-site/_columns.scss b/sass/abstracts/variables/_columns.scss
similarity index 100%
rename from sass/variables-site/_columns.scss
rename to sass/abstracts/variables/_columns.scss
diff --git a/sass/variables-site/_structure.scss b/sass/abstracts/variables/_structure.scss
similarity index 100%
rename from sass/variables-site/_structure.scss
rename to sass/abstracts/variables/_structure.scss
diff --git a/sass/variables-site/_typography.scss b/sass/abstracts/variables/_typography.scss
similarity index 100%
rename from sass/variables-site/_typography.scss
rename to sass/abstracts/variables/_typography.scss
diff --git a/sass/base/_base.scss b/sass/base/_base.scss
new file mode 100644
index 0000000..6e9a9ad
--- /dev/null
+++ b/sass/base/_base.scss
@@ -0,0 +1,20 @@
+/* Typography
+--------------------------------------------- */
+@import "typography/typography";
+
+/* Elements
+--------------------------------------------- */
+@import "elements/body";
+@import "elements/hr";
+@import "elements/lists";
+@import "elements/media";
+@import "elements/tables";
+
+/* Links
+--------------------------------------------- */
+@import "elements/links";
+
+/* Forms
+--------------------------------------------- */
+@import "elements/buttons";
+@import "elements/fields";
diff --git a/sass/base/elements/_body.scss b/sass/base/elements/_body.scss
new file mode 100644
index 0000000..43df115
--- /dev/null
+++ b/sass/base/elements/_body.scss
@@ -0,0 +1,3 @@
+body {
+	background: $color__background-body; // Fallback for when there is no custom background color defined.
+}
diff --git a/sass/forms/_buttons.scss b/sass/base/elements/_buttons.scss
similarity index 100%
rename from sass/forms/_buttons.scss
rename to sass/base/elements/_buttons.scss
diff --git a/sass/forms/_fields.scss b/sass/base/elements/_fields.scss
similarity index 100%
rename from sass/forms/_fields.scss
rename to sass/base/elements/_fields.scss
diff --git a/sass/base/elements/_hr.scss b/sass/base/elements/_hr.scss
new file mode 100644
index 0000000..0ed86cf
--- /dev/null
+++ b/sass/base/elements/_hr.scss
@@ -0,0 +1,6 @@
+hr {
+	background-color: $color__background-hr;
+	border: 0;
+	height: 1px;
+	margin-bottom: 1.5em;
+}
diff --git a/sass/navigation/_links.scss b/sass/base/elements/_links.scss
similarity index 100%
rename from sass/navigation/_links.scss
rename to sass/base/elements/_links.scss
diff --git a/sass/elements/_lists.scss b/sass/base/elements/_lists.scss
similarity index 100%
rename from sass/elements/_lists.scss
rename to sass/base/elements/_lists.scss
diff --git a/sass/base/elements/_media.scss b/sass/base/elements/_media.scss
new file mode 100644
index 0000000..db63ae0
--- /dev/null
+++ b/sass/base/elements/_media.scss
@@ -0,0 +1,15 @@
+/* Make sure embeds and iframes fit their containers. */
+embed,
+iframe,
+object {
+	max-width: 100%;
+}
+
+img {
+	height: auto; // Make sure images are scaled correctly.
+	max-width: 100%; // Adhere to container width.
+}
+
+figure {
+	margin: 1em 0; // Extra wide images within figure tags don't overflow the content area.
+}
diff --git a/sass/elements/_tables.scss b/sass/base/elements/_tables.scss
similarity index 100%
rename from sass/elements/_tables.scss
rename to sass/base/elements/_tables.scss
diff --git a/sass/typography/_copy.scss b/sass/base/typography/_copy.scss
similarity index 100%
rename from sass/typography/_copy.scss
rename to sass/base/typography/_copy.scss
diff --git a/sass/typography/_headings.scss b/sass/base/typography/_headings.scss
similarity index 100%
rename from sass/typography/_headings.scss
rename to sass/base/typography/_headings.scss
diff --git a/sass/typography/_typography.scss b/sass/base/typography/_typography.scss
similarity index 100%
rename from sass/typography/_typography.scss
rename to sass/base/typography/_typography.scss
diff --git a/sass/components/_components.scss b/sass/components/_components.scss
new file mode 100644
index 0000000..d7efdff
--- /dev/null
+++ b/sass/components/_components.scss
@@ -0,0 +1,27 @@
+/* Navigation
+--------------------------------------------- */
+@import "navigation/navigation";
+
+/* Posts and pages
+--------------------------------------------- */
+@import "content/posts-and-pages";
+
+/* Comments
+--------------------------------------------- */
+@import "comments/comments";
+
+/* Widgets
+--------------------------------------------- */
+@import "widgets/widgets";
+
+/* Media
+--------------------------------------------- */
+@import "media/media";
+
+/* Captions
+--------------------------------------------- */
+@import "media/captions";
+
+/* Galleries
+--------------------------------------------- */
+@import "media/galleries";
diff --git a/sass/site/primary/_comments.scss b/sass/components/comments/_comments.scss
similarity index 100%
rename from sass/site/primary/_comments.scss
rename to sass/components/comments/_comments.scss
diff --git a/sass/site/primary/_posts-and-pages.scss b/sass/components/content/_posts-and-pages.scss
similarity index 100%
rename from sass/site/primary/_posts-and-pages.scss
rename to sass/components/content/_posts-and-pages.scss
diff --git a/sass/media/_captions.scss b/sass/components/media/_captions.scss
similarity index 100%
rename from sass/media/_captions.scss
rename to sass/components/media/_captions.scss
diff --git a/sass/media/_galleries.scss b/sass/components/media/_galleries.scss
similarity index 100%
rename from sass/media/_galleries.scss
rename to sass/components/media/_galleries.scss
diff --git a/sass/components/media/_media.scss b/sass/components/media/_media.scss
new file mode 100644
index 0000000..425b6d5
--- /dev/null
+++ b/sass/components/media/_media.scss
@@ -0,0 +1,13 @@
+.page-content .wp-smiley,
+.entry-content .wp-smiley,
+.comment-content .wp-smiley {
+	border: none;
+	margin-bottom: 0;
+	margin-top: 0;
+	padding: 0;
+}
+
+/* Make sure logo link wraps around logo image. */
+.custom-logo-link {
+	display: inline-block;
+}
diff --git a/sass/navigation/_menus.scss b/sass/components/navigation/_navigation.scss
similarity index 100%
rename from sass/navigation/_menus.scss
rename to sass/components/navigation/_navigation.scss
diff --git a/sass/site/secondary/_widgets.scss b/sass/components/widgets/_widgets.scss
similarity index 100%
rename from sass/site/secondary/_widgets.scss
rename to sass/components/widgets/_widgets.scss
diff --git a/sass/elements/_elements.scss b/sass/elements/_elements.scss
deleted file mode 100644
index 51ebb30..0000000
--- a/sass/elements/_elements.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-/* Inherit box-sizing to more easily change it's value on a component level.
-@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
-*,
-*::before,
-*::after {
-	box-sizing: inherit;
-}
-
-html {
-	box-sizing: border-box;
-}
-
-body {
-	background: $color__background-body; // Fallback for when there is no custom background color defined.
-}
-
-hr {
-	background-color: $color__background-hr;
-	border: 0;
-	height: 1px;
-	margin-bottom: 1.5em;
-}
-
-@import "lists";
-
-img {
-	height: auto; // Make sure images are scaled correctly.
-	max-width: 100%; // Adhere to container width.
-}
-
-figure {
-	margin: 1em 0; // Extra wide images within figure tags don't overflow the content area.
-}
-
-@import "tables";
diff --git a/sass/forms/_forms.scss b/sass/forms/_forms.scss
deleted file mode 100644
index 94fd5bd..0000000
--- a/sass/forms/_forms.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "buttons";
-@import "fields";
diff --git a/sass/generic/_box-sizing.scss b/sass/generic/_box-sizing.scss
new file mode 100644
index 0000000..a0619fd
--- /dev/null
+++ b/sass/generic/_box-sizing.scss
@@ -0,0 +1,11 @@
+/* Inherit box-sizing to more easily change it's value on a component level.
+@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
+*,
+*::before,
+*::after {
+	box-sizing: inherit;
+}
+
+html {
+	box-sizing: border-box;
+}
diff --git a/sass/_normalize.scss b/sass/generic/_normalize.scss
similarity index 100%
rename from sass/_normalize.scss
rename to sass/generic/_normalize.scss
diff --git a/sass/layout/_content-sidebar.scss b/sass/layouts/_content-sidebar.scss
similarity index 100%
rename from sass/layout/_content-sidebar.scss
rename to sass/layouts/_content-sidebar.scss
diff --git a/sass/layout/_no-sidebar.scss b/sass/layouts/_no-sidebar.scss
similarity index 100%
rename from sass/layout/_no-sidebar.scss
rename to sass/layouts/_no-sidebar.scss
diff --git a/sass/layout/_sidebar-content.scss b/sass/layouts/_sidebar-content.scss
similarity index 100%
rename from sass/layout/_sidebar-content.scss
rename to sass/layouts/_sidebar-content.scss
diff --git a/sass/media/_media.scss b/sass/media/_media.scss
deleted file mode 100644
index b46086d..0000000
--- a/sass/media/_media.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-.page-content .wp-smiley,
-.entry-content .wp-smiley,
-.comment-content .wp-smiley {
-	border: none;
-	margin-bottom: 0;
-	margin-top: 0;
-	padding: 0;
-}
-
-/* Make sure embeds and iframes fit their containers. */
-embed,
-iframe,
-object {
-	max-width: 100%;
-}
-
-/* Make sure logo link wraps around logo image. */
-.custom-logo-link {
-	display: inline-block;
-}
-
-/*--------------------------------------------------------------
-## Captions
---------------------------------------------------------------*/
-@import "captions";
-
-/*--------------------------------------------------------------
-## Galleries
---------------------------------------------------------------*/
-@import "galleries";
diff --git a/sass/navigation/_navigation.scss b/sass/navigation/_navigation.scss
deleted file mode 100644
index 2e774b2..0000000
--- a/sass/navigation/_navigation.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-/*--------------------------------------------------------------
-## Links
---------------------------------------------------------------*/
-@import "links";
-
-/*--------------------------------------------------------------
-## Menus
---------------------------------------------------------------*/
-@import "menus";
diff --git a/sass/modules/_infinite-scroll.scss b/sass/plugins/jetpack/_infinite-scroll.scss
similarity index 100%
rename from sass/modules/_infinite-scroll.scss
rename to sass/plugins/jetpack/_infinite-scroll.scss
diff --git a/sass/shop/_checkout.scss b/sass/plugins/woocommerce/_checkout.scss
similarity index 100%
rename from sass/shop/_checkout.scss
rename to sass/plugins/woocommerce/_checkout.scss
diff --git a/sass/shop/_components.scss b/sass/plugins/woocommerce/_components.scss
similarity index 100%
rename from sass/shop/_components.scss
rename to sass/plugins/woocommerce/_components.scss
diff --git a/sass/shop/_products.scss b/sass/plugins/woocommerce/_products.scss
similarity index 100%
rename from sass/shop/_products.scss
rename to sass/plugins/woocommerce/_products.scss
diff --git a/sass/shop/_single-product.scss b/sass/plugins/woocommerce/_single-product.scss
similarity index 100%
rename from sass/shop/_single-product.scss
rename to sass/plugins/woocommerce/_single-product.scss
diff --git a/sass/shop/_tables.scss b/sass/plugins/woocommerce/_tables.scss
similarity index 100%
rename from sass/shop/_tables.scss
rename to sass/plugins/woocommerce/_tables.scss
diff --git a/sass/shop/_widgets.scss b/sass/plugins/woocommerce/_widgets.scss
similarity index 100%
rename from sass/shop/_widgets.scss
rename to sass/plugins/woocommerce/_widgets.scss
diff --git a/sass/site/_site.scss b/sass/site/_site.scss
deleted file mode 100644
index 23408f0..0000000
--- a/sass/site/_site.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-// @import "../layout/content-sidebar";
-// @import "../layout/sidebar-content";
-
-/*--------------------------------------------------------------
-## Posts and pages
---------------------------------------------------------------*/
-@import "primary/posts-and-pages";
-
-/*--------------------------------------------------------------
-## Comments
---------------------------------------------------------------*/
-@import "primary/comments";
diff --git a/sass/style.scss b/sass/style.scss
index 0344f4c..e451f8d 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -23,78 +23,78 @@ Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
 /*--------------------------------------------------------------
 >>> TABLE OF CONTENTS:
 ----------------------------------------------------------------
-# Normalize
-# Typography
-# Elements
-# Forms
-# Navigation
-	## Links
-	## Menus
-# Accessibility
-# Alignments
-# Widgets
-# Content
-	## Posts and pages
-	## Comments
-# Infinite scroll
-# Media
-	## Captions
-	## Galleries
+# Generic
+	- Normalize
+	- Box sizing
+# Base
+	- Typography
+	- Elements
+	- Links
+	- Forms
+## Layouts
+# Components
+	- Navigation
+	- Posts and pages
+	- Comments
+	- Widgets
+	- Media
+	- Captions
+	- Galleries
+# plugins
+	- Jetpack infinite scroll
+# Utilities
+	- Accessibility
+	- Alignments
+
 --------------------------------------------------------------*/
-@import "variables-site/variables-site";
-@import "mixins/mixins-master";
+
+// Import variables and mixins.
+@import "abstracts/abstracts";
 
 /*--------------------------------------------------------------
-# Normalize
+# Generic
 --------------------------------------------------------------*/
-@import "normalize";
+
+/* Normalize
+--------------------------------------------- */
+@import "generic/normalize";
+
+/* Box sizing
+--------------------------------------------- */
+@import "generic/box-sizing";
 
 /*--------------------------------------------------------------
-# Typography
+# Base
 --------------------------------------------------------------*/
-@import "typography/typography";
+@import "base/base";
 
 /*--------------------------------------------------------------
-# Elements
+# Layouts
 --------------------------------------------------------------*/
-@import "elements/elements";
+// @import "layouts/content-sidebar"; // Uncomment this line for a sidebar on right side of your content.
+// @import "layouts/sidebar-content"; // Uncomment this line for a sidebar on left side of your content.
 
 /*--------------------------------------------------------------
-# Forms
+# Components
 --------------------------------------------------------------*/
-@import "forms/forms";
+@import "components/components";
 
 /*--------------------------------------------------------------
-# Navigation
+# Plugins
 --------------------------------------------------------------*/
-@import "navigation/navigation";
+
+/* Jetpack infinite scroll
+--------------------------------------------- */
+@import "plugins/jetpack/infinite-scroll";
 
 /*--------------------------------------------------------------
-# Accessibility
+# Utilities
 --------------------------------------------------------------*/
-@import "modules/accessibility";
 
-/*--------------------------------------------------------------
-# Alignments
---------------------------------------------------------------*/
-@import "modules/alignments";
+/* Accessibility
+--------------------------------------------- */
+@import "utilities/accessibility";
 
-/*--------------------------------------------------------------
-# Widgets
---------------------------------------------------------------*/
-@import "site/secondary/widgets";
-
-/*--------------------------------------------------------------
-# Content
---------------------------------------------------------------*/
-@import "site/site";
-
-/*--------------------------------------------------------------
-# Infinite scroll
---------------------------------------------------------------*/
-@import "modules/infinite-scroll";
-
-/*--------------------------------------------------------------
-# Media
---------------------------------------------------------------*/
-@import "media/media";
+/* Alignments
+--------------------------------------------- */
+@import "utilities/alignments";
diff --git a/sass/modules/_accessibility.scss b/sass/utilities/_accessibility.scss
similarity index 100%
rename from sass/modules/_accessibility.scss
rename to sass/utilities/_accessibility.scss
diff --git a/sass/modules/_alignments.scss b/sass/utilities/_alignments.scss
similarity index 100%
rename from sass/modules/_alignments.scss
rename to sass/utilities/_alignments.scss
diff --git a/sass/variables-site/_variables-site.scss b/sass/variables-site/_variables-site.scss
deleted file mode 100644
index 1b23d51..0000000
--- a/sass/variables-site/_variables-site.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@import "colors";
-@import "typography";
-@import "structure";
-@import "columns";
diff --git a/sass/woocommerce.scss b/sass/woocommerce.scss
index 0a442c0..7db34bb 100644
--- a/sass/woocommerce.scss
+++ b/sass/woocommerce.scss
@@ -9,36 +9,35 @@ $woocommerce__color-error: #e2401c;
 $woocommerce__color-success: #0f834d;
 $woocommerce__color-info: #3d9cd2;
 
-// Imports
-@import "variables-site/variables-site";
-@import "mixins/mixins-master";
+// Import variables and mixins
+@import "abstracts/abstracts";
 
 /**
  * Shop tables
  */
-@import "shop/tables";
+@import "plugins/woocommerce/tables";
 
 /**
  * Products
  */
-@import "shop/products";
+@import "plugins/woocommerce/products";
 
 /**
  * Single product
  */
-@import "shop/single-product";
+@import "plugins/woocommerce/single-product";
 
 /**
  * Checkout
  */
-@import "shop/checkout";
+@import "plugins/woocommerce/checkout";
 
 /**
  * General WooCommerce components
  */
-@import "shop/components";
+@import "plugins/woocommerce/components";
 
 /**
  * WooCommerce widgets
  */
-@import "shop/widgets";
+@import "plugins/woocommerce/widgets";
diff --git a/style-rtl.css b/style-rtl.css
index f664744..d0df954 100644
--- a/style-rtl.css
+++ b/style-rtl.css
@@ -23,29 +23,38 @@ Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
 /*--------------------------------------------------------------
 >>> TABLE OF CONTENTS:
 ----------------------------------------------------------------
-# Normalize
-# Typography
-# Elements
-# Forms
-# Navigation
-	## Links
-	## Menus
-# Accessibility
-# Alignments
-# Widgets
-# Content
-	## Posts and pages
-	## Comments
-# Infinite scroll
-# Media
-	## Captions
-	## Galleries
+# Generic
+	- Normalize
+	- Box sizing
+# Base
+	- Typography
+	- Elements
+	- Links
+	- Forms
+## Layouts
+# Components
+	- Navigation
+	- Posts and pages
+	- Comments
+	- Widgets
+	- Media
+	- Captions
+	- Galleries
+# plugins
+	- Jetpack infinite scroll
+# Utilities
+	- Accessibility
+	- Alignments
+
 --------------------------------------------------------------*/
 
 /*--------------------------------------------------------------
-# Normalize
+# Generic
 --------------------------------------------------------------*/
 
+/* Normalize
+--------------------------------------------- */
+
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 
 /* Document
@@ -364,9 +373,27 @@ template {
 	display: none;
 }
 
+/* Box sizing
+--------------------------------------------- */
+
+/* Inherit box-sizing to more easily change it's value on a component level.
+@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
+*,
+*::before,
+*::after {
+	box-sizing: inherit;
+}
+
+html {
+	box-sizing: border-box;
+}
+
 /*--------------------------------------------------------------
-# Typography
+# Base
 --------------------------------------------------------------*/
+
+/* Typography
+--------------------------------------------- */
 body,
 button,
 input,
@@ -442,22 +469,8 @@ big {
 	font-size: 125%;
 }
 
-/*--------------------------------------------------------------
-# Elements
---------------------------------------------------------------*/
-
-/* Inherit box-sizing to more easily change it's value on a component level.
-@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
-*,
-*::before,
-*::after {
-	box-sizing: inherit;
-}
-
-html {
-	box-sizing: border-box;
-}
-
+/* Elements
+--------------------------------------------- */
 body {
 	background: #fff;
 }
@@ -496,6 +509,13 @@ dd {
 	margin: 0 1.5em 1.5em;
 }
 
+/* Make sure embeds and iframes fit their containers. */
+embed,
+iframe,
+object {
+	max-width: 100%;
+}
+
 img {
 	height: auto;
 	max-width: 100%;
@@ -510,9 +530,33 @@ table {
 	width: 100%;
 }
 
-/*--------------------------------------------------------------
-# Forms
---------------------------------------------------------------*/
+/* Links
+--------------------------------------------- */
+a {
+	color: #4169e1;
+}
+
+a:visited {
+	color: #800080;
+}
+
+a:hover,
+a:focus,
+a:active {
+	color: #191970;
+}
+
+a:focus {
+	outline: thin dotted;
+}
+
+a:hover,
+a:active {
+	outline: 0;
+}
+
+/* Forms
+--------------------------------------------- */
 button,
 input[type="button"],
 input[type="reset"],
@@ -595,38 +639,15 @@ textarea {
 }
 
 /*--------------------------------------------------------------
-# Navigation
+# Layouts
 --------------------------------------------------------------*/
 
 /*--------------------------------------------------------------
-## Links
+# Components
 --------------------------------------------------------------*/
-a {
-	color: #4169e1;
-}
 
-a:visited {
-	color: #800080;
-}
-
-a:hover,
-a:focus,
-a:active {
-	color: #191970;
-}
-
-a:focus {
-	outline: thin dotted;
-}
-
-a:hover,
-a:active {
-	outline: 0;
-}
-
-/*--------------------------------------------------------------
-## Menus
---------------------------------------------------------------*/
+/* Navigation
+--------------------------------------------- */
 .main-navigation {
 	display: block;
 	width: 100%;
@@ -721,90 +742,8 @@ a:active {
 	flex: 1 0 50%;
 }
 
-/*--------------------------------------------------------------
-# Accessibility
---------------------------------------------------------------*/
-
-/* Text meant only for screen readers. */
-.screen-reader-text {
-	border: 0;
-	clip: rect(1px, 1px, 1px, 1px);
-	clip-path: inset(50%);
-	height: 1px;
-	margin: -1px;
-	overflow: hidden;
-	padding: 0;
-	position: absolute !important;
-	width: 1px;
-	word-wrap: normal !important;
-}
-
-.screen-reader-text:focus {
-	background-color: #f1f1f1;
-	border-radius: 3px;
-	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
-	clip: auto !important;
-	clip-path: none;
-	color: #21759b;
-	display: block;
-	font-size: 0.875rem;
-	font-weight: 700;
-	height: auto;
-	right: 5px;
-	line-height: normal;
-	padding: 15px 23px 14px;
-	text-decoration: none;
-	top: 5px;
-	width: auto;
-	z-index: 100000;
-}
-
-/* Do not show the outline on the skip link target. */
-#primary[tabindex="-1"]:focus {
-	outline: 0;
-}
-
-/*--------------------------------------------------------------
-# Alignments
---------------------------------------------------------------*/
-.alignleft {
-	float: right;
-	margin-left: 1.5em;
-	margin-bottom: 1.5em;
-}
-
-.alignright {
-	float: left;
-	margin-right: 1.5em;
-	margin-bottom: 1.5em;
-}
-
-.aligncenter {
-	clear: both;
-	display: block;
-	margin-right: auto;
-	margin-left: auto;
-	margin-bottom: 1.5em;
-}
-
-/*--------------------------------------------------------------
-# Widgets
---------------------------------------------------------------*/
-.widget {
-	margin: 0 0 1.5em;
-}
-
-.widget select {
-	max-width: 100%;
-}
-
-/*--------------------------------------------------------------
-# Content
---------------------------------------------------------------*/
-
-/*--------------------------------------------------------------
-## Posts and pages
---------------------------------------------------------------*/
+/* Posts and pages
+--------------------------------------------- */
 .sticky {
 	display: block;
 }
@@ -829,9 +768,8 @@ a:active {
 	margin: 0 0 1.5em;
 }
 
-/*--------------------------------------------------------------
-## Comments
---------------------------------------------------------------*/
+/* Comments
+--------------------------------------------- */
 .comment-content a {
 	word-wrap: break-word;
 }
@@ -840,24 +778,18 @@ a:active {
 	display: block;
 }
 
-/*--------------------------------------------------------------
-# Infinite scroll
---------------------------------------------------------------*/
-
-/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
-.infinite-scroll .posts-navigation,
-.infinite-scroll.neverending .site-footer {
-	display: none;
+/* Widgets
+--------------------------------------------- */
+.widget {
+	margin: 0 0 1.5em;
 }
 
-/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
-.infinity-end.neverending .site-footer {
-	display: block;
+.widget select {
+	max-width: 100%;
 }
 
-/*--------------------------------------------------------------
-# Media
---------------------------------------------------------------*/
+/* Media
+--------------------------------------------- */
 .page-content .wp-smiley,
 .entry-content .wp-smiley,
 .comment-content .wp-smiley {
@@ -867,21 +799,13 @@ a:active {
 	padding: 0;
 }
 
-/* Make sure embeds and iframes fit their containers. */
-embed,
-iframe,
-object {
-	max-width: 100%;
-}
-
 /* Make sure logo link wraps around logo image. */
 .custom-logo-link {
 	display: inline-block;
 }
 
-/*--------------------------------------------------------------
-## Captions
---------------------------------------------------------------*/
+/* Captions
+--------------------------------------------- */
 .wp-caption {
 	margin-bottom: 1.5em;
 	max-width: 100%;
@@ -901,9 +825,8 @@ object {
 	text-align: center;
 }
 
-/*--------------------------------------------------------------
-## Galleries
---------------------------------------------------------------*/
+/* Galleries
+--------------------------------------------- */
 .gallery {
 	margin-bottom: 1.5em;
 	display: grid;
@@ -951,3 +874,89 @@ object {
 .gallery-caption {
 	display: block;
 }
+
+/*--------------------------------------------------------------
+# Plugins
+--------------------------------------------------------------*/
+
+/* Jetpack infinite scroll
+--------------------------------------------- */
+
+/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
+.infinite-scroll .posts-navigation,
+.infinite-scroll.neverending .site-footer {
+	display: none;
+}
+
+/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
+.infinity-end.neverending .site-footer {
+	display: block;
+}
+
+/*--------------------------------------------------------------
+# Utilities
+--------------------------------------------------------------*/
+
+/* Accessibility
+--------------------------------------------- */
+
+/* Text meant only for screen readers. */
+.screen-reader-text {
+	border: 0;
+	clip: rect(1px, 1px, 1px, 1px);
+	clip-path: inset(50%);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute !important;
+	width: 1px;
+	word-wrap: normal !important;
+}
+
+.screen-reader-text:focus {
+	background-color: #f1f1f1;
+	border-radius: 3px;
+	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
+	clip: auto !important;
+	clip-path: none;
+	color: #21759b;
+	display: block;
+	font-size: 0.875rem;
+	font-weight: 700;
+	height: auto;
+	right: 5px;
+	line-height: normal;
+	padding: 15px 23px 14px;
+	text-decoration: none;
+	top: 5px;
+	width: auto;
+	z-index: 100000;
+}
+
+/* Do not show the outline on the skip link target. */
+#primary[tabindex="-1"]:focus {
+	outline: 0;
+}
+
+/* Alignments
+--------------------------------------------- */
+.alignleft {
+	float: right;
+	margin-left: 1.5em;
+	margin-bottom: 1.5em;
+}
+
+.alignright {
+	float: left;
+	margin-right: 1.5em;
+	margin-bottom: 1.5em;
+}
+
+.aligncenter {
+	clear: both;
+	display: block;
+	margin-right: auto;
+	margin-left: auto;
+	margin-bottom: 1.5em;
+}
diff --git a/style.css b/style.css
index b8c4dea..3aeeee9 100644
--- a/style.css
+++ b/style.css
@@ -23,29 +23,38 @@ Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
 /*--------------------------------------------------------------
 >>> TABLE OF CONTENTS:
 ----------------------------------------------------------------
-# Normalize
-# Typography
-# Elements
-# Forms
-# Navigation
-	## Links
-	## Menus
-# Accessibility
-# Alignments
-# Widgets
-# Content
-	## Posts and pages
-	## Comments
-# Infinite scroll
-# Media
-	## Captions
-	## Galleries
+# Generic
+	- Normalize
+	- Box sizing
+# Base
+	- Typography
+	- Elements
+	- Links
+	- Forms
+## Layouts
+# Components
+	- Navigation
+	- Posts and pages
+	- Comments
+	- Widgets
+	- Media
+	- Captions
+	- Galleries
+# plugins
+	- Jetpack infinite scroll
+# Utilities
+	- Accessibility
+	- Alignments
+
 --------------------------------------------------------------*/
 
 /*--------------------------------------------------------------
-# Normalize
+# Generic
 --------------------------------------------------------------*/
 
+/* Normalize
+--------------------------------------------- */
+
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 
 /* Document
@@ -364,9 +373,27 @@ template {
 	display: none;
 }
 
+/* Box sizing
+--------------------------------------------- */
+
+/* Inherit box-sizing to more easily change it's value on a component level.
+@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
+*,
+*::before,
+*::after {
+	box-sizing: inherit;
+}
+
+html {
+	box-sizing: border-box;
+}
+
 /*--------------------------------------------------------------
-# Typography
+# Base
 --------------------------------------------------------------*/
+
+/* Typography
+--------------------------------------------- */
 body,
 button,
 input,
@@ -442,22 +469,8 @@ big {
 	font-size: 125%;
 }
 
-/*--------------------------------------------------------------
-# Elements
---------------------------------------------------------------*/
-
-/* Inherit box-sizing to more easily change it's value on a component level.
-@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
-*,
-*::before,
-*::after {
-	box-sizing: inherit;
-}
-
-html {
-	box-sizing: border-box;
-}
-
+/* Elements
+--------------------------------------------- */
 body {
 	background: #fff;
 }
@@ -496,6 +509,13 @@ dd {
 	margin: 0 1.5em 1.5em;
 }
 
+/* Make sure embeds and iframes fit their containers. */
+embed,
+iframe,
+object {
+	max-width: 100%;
+}
+
 img {
 	height: auto;
 	max-width: 100%;
@@ -510,9 +530,33 @@ table {
 	width: 100%;
 }
 
-/*--------------------------------------------------------------
-# Forms
---------------------------------------------------------------*/
+/* Links
+--------------------------------------------- */
+a {
+	color: #4169e1;
+}
+
+a:visited {
+	color: #800080;
+}
+
+a:hover,
+a:focus,
+a:active {
+	color: #191970;
+}
+
+a:focus {
+	outline: thin dotted;
+}
+
+a:hover,
+a:active {
+	outline: 0;
+}
+
+/* Forms
+--------------------------------------------- */
 button,
 input[type="button"],
 input[type="reset"],
@@ -595,38 +639,15 @@ textarea {
 }
 
 /*--------------------------------------------------------------
-# Navigation
+# Layouts
 --------------------------------------------------------------*/
 
 /*--------------------------------------------------------------
-## Links
+# Components
 --------------------------------------------------------------*/
-a {
-	color: #4169e1;
-}
 
-a:visited {
-	color: #800080;
-}
-
-a:hover,
-a:focus,
-a:active {
-	color: #191970;
-}
-
-a:focus {
-	outline: thin dotted;
-}
-
-a:hover,
-a:active {
-	outline: 0;
-}
-
-/*--------------------------------------------------------------
-## Menus
---------------------------------------------------------------*/
+/* Navigation
+--------------------------------------------- */
 .main-navigation {
 	display: block;
 	width: 100%;
@@ -721,90 +742,8 @@ a:active {
 	flex: 1 0 50%;
 }
 
-/*--------------------------------------------------------------
-# Accessibility
---------------------------------------------------------------*/
-
-/* Text meant only for screen readers. */
-.screen-reader-text {
-	border: 0;
-	clip: rect(1px, 1px, 1px, 1px);
-	clip-path: inset(50%);
-	height: 1px;
-	margin: -1px;
-	overflow: hidden;
-	padding: 0;
-	position: absolute !important;
-	width: 1px;
-	word-wrap: normal !important;
-}
-
-.screen-reader-text:focus {
-	background-color: #f1f1f1;
-	border-radius: 3px;
-	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
-	clip: auto !important;
-	clip-path: none;
-	color: #21759b;
-	display: block;
-	font-size: 0.875rem;
-	font-weight: 700;
-	height: auto;
-	left: 5px;
-	line-height: normal;
-	padding: 15px 23px 14px;
-	text-decoration: none;
-	top: 5px;
-	width: auto;
-	z-index: 100000;
-}
-
-/* Do not show the outline on the skip link target. */
-#primary[tabindex="-1"]:focus {
-	outline: 0;
-}
-
-/*--------------------------------------------------------------
-# Alignments
---------------------------------------------------------------*/
-.alignleft {
-	float: left;
-	margin-right: 1.5em;
-	margin-bottom: 1.5em;
-}
-
-.alignright {
-	float: right;
-	margin-left: 1.5em;
-	margin-bottom: 1.5em;
-}
-
-.aligncenter {
-	clear: both;
-	display: block;
-	margin-left: auto;
-	margin-right: auto;
-	margin-bottom: 1.5em;
-}
-
-/*--------------------------------------------------------------
-# Widgets
---------------------------------------------------------------*/
-.widget {
-	margin: 0 0 1.5em;
-}
-
-.widget select {
-	max-width: 100%;
-}
-
-/*--------------------------------------------------------------
-# Content
---------------------------------------------------------------*/
-
-/*--------------------------------------------------------------
-## Posts and pages
---------------------------------------------------------------*/
+/* Posts and pages
+--------------------------------------------- */
 .sticky {
 	display: block;
 }
@@ -829,9 +768,8 @@ a:active {
 	margin: 0 0 1.5em;
 }
 
-/*--------------------------------------------------------------
-## Comments
---------------------------------------------------------------*/
+/* Comments
+--------------------------------------------- */
 .comment-content a {
 	word-wrap: break-word;
 }
@@ -840,24 +778,18 @@ a:active {
 	display: block;
 }
 
-/*--------------------------------------------------------------
-# Infinite scroll
---------------------------------------------------------------*/
-
-/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
-.infinite-scroll .posts-navigation,
-.infinite-scroll.neverending .site-footer {
-	display: none;
+/* Widgets
+--------------------------------------------- */
+.widget {
+	margin: 0 0 1.5em;
 }
 
-/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
-.infinity-end.neverending .site-footer {
-	display: block;
+.widget select {
+	max-width: 100%;
 }
 
-/*--------------------------------------------------------------
-# Media
---------------------------------------------------------------*/
+/* Media
+--------------------------------------------- */
 .page-content .wp-smiley,
 .entry-content .wp-smiley,
 .comment-content .wp-smiley {
@@ -867,21 +799,13 @@ a:active {
 	padding: 0;
 }
 
-/* Make sure embeds and iframes fit their containers. */
-embed,
-iframe,
-object {
-	max-width: 100%;
-}
-
 /* Make sure logo link wraps around logo image. */
 .custom-logo-link {
 	display: inline-block;
 }
 
-/*--------------------------------------------------------------
-## Captions
---------------------------------------------------------------*/
+/* Captions
+--------------------------------------------- */
 .wp-caption {
 	margin-bottom: 1.5em;
 	max-width: 100%;
@@ -901,9 +825,8 @@ object {
 	text-align: center;
 }
 
-/*--------------------------------------------------------------
-## Galleries
---------------------------------------------------------------*/
+/* Galleries
+--------------------------------------------- */
 .gallery {
 	margin-bottom: 1.5em;
 	display: grid;
@@ -951,3 +874,89 @@ object {
 .gallery-caption {
 	display: block;
 }
+
+/*--------------------------------------------------------------
+# Plugins
+--------------------------------------------------------------*/
+
+/* Jetpack infinite scroll
+--------------------------------------------- */
+
+/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
+.infinite-scroll .posts-navigation,
+.infinite-scroll.neverending .site-footer {
+	display: none;
+}
+
+/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
+.infinity-end.neverending .site-footer {
+	display: block;
+}
+
+/*--------------------------------------------------------------
+# Utilities
+--------------------------------------------------------------*/
+
+/* Accessibility
+--------------------------------------------- */
+
+/* Text meant only for screen readers. */
+.screen-reader-text {
+	border: 0;
+	clip: rect(1px, 1px, 1px, 1px);
+	clip-path: inset(50%);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute !important;
+	width: 1px;
+	word-wrap: normal !important;
+}
+
+.screen-reader-text:focus {
+	background-color: #f1f1f1;
+	border-radius: 3px;
+	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
+	clip: auto !important;
+	clip-path: none;
+	color: #21759b;
+	display: block;
+	font-size: 0.875rem;
+	font-weight: 700;
+	height: auto;
+	left: 5px;
+	line-height: normal;
+	padding: 15px 23px 14px;
+	text-decoration: none;
+	top: 5px;
+	width: auto;
+	z-index: 100000;
+}
+
+/* Do not show the outline on the skip link target. */
+#primary[tabindex="-1"]:focus {
+	outline: 0;
+}
+
+/* Alignments
+--------------------------------------------- */
+.alignleft {
+	float: left;
+	margin-right: 1.5em;
+	margin-bottom: 1.5em;
+}
+
+.alignright {
+	float: right;
+	margin-left: 1.5em;
+	margin-bottom: 1.5em;
+}
+
+.aligncenter {
+	clear: both;
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+	margin-bottom: 1.5em;
+}