/*
Theme Name: Two Column
Theme URI: https://precode.net/two-column
Author: Precode
Author URI: https://precode.net
Description: Two Column is a starter theme for Ghost.
Version: 1.0.0
*/

/*--------------------------------------------------------------
Reset
--------------------------------------------------------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}

html {
	font-size: 62.5%; /* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */
	overflow-y: scroll; /* Keeps page centered in all browsers regardless of content height */
	-webkit-text-size-adjust: 100%; /* Prevents iOS text size adjust after orientation change, without disabling user zoom */
	-ms-text-size-adjust:     100%; /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
}

*,
*:before,
*:after { /* apply a natural box layout model to all elements; see http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
	-webkit-box-sizing: border-box; /* Not needed for modern webkit but still used by Blackberry Browser 7.0; see http://caniuse.com/#search=box-sizing */
	-moz-box-sizing:    border-box; /* Still needed for Firefox 28; see http://caniuse.com/#search=box-sizing */
	box-sizing:         border-box;
}

body {
	background: #f7f7f7;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section {
	display: block;
}

ol, ul {
	list-style: none;
}

table { /* tables still need 'cellspacing="0"' in the markup */
	border-collapse: separate;
	border-spacing: 0;
}

caption, th, td {
	font-weight: normal;
	text-align: left;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}

blockquote, q {
	quotes: "" "";
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

img {
	height: auto;
	width: 100%;
}

a img {
	display: block;
	border: 0;
}


/*--------------------------------------------------------------
Typography
--------------------------------------------------------------*/

body,
button,
input,
select,
textarea {
	color: #4a4a4a;
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.5;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
}

h1 {
	font-size: 24px;
}

h2 {
	font-size: 22px;
}

h3 {
	font-size: 1.3em;
}

h4 { font-size: 1.2em;
}

h5 { font-size: 1.1em;
}

h6 { font-size: 1em;
}

hr {
	background-color: rgba(0, 0, 0, 0.1);
	border: 0;
	height: 1px;
	margin: 1.5em 0;
}

/* Text elements */
p {
	margin-bottom: 1.5em;
}

p:last-child {
	margin-bottom: 0;
}

ul {
	list-style: disc;
	margin: 0 0 34px 24px;
}

ol {
	list-style: decimal;
	margin: 0 0 34px 24px;
}

li > ul {
	margin-bottom: 0;
	margin-left: 24px;
}

li > ol {
	margin-bottom: 0;
	margin-left: 35px;
}

dt {
	font-weight: bold;
}

dd {
	margin: 0 0 34px;
}

b, strong {
	font-weight: 700;
}

dfn, cite, em, i {
	font-style: italic;
}

blockquote {
	font-style: italic;
	margin: 0 0 0 1.5em;
}

.format-quote blockquote{
	margin: 0;
}

blockquote em, blockquote i, blockquote cite {
	font-style: normal;
}

blockquote cite,
.quote-caption {
	color: #808080;
	font-weight: 400;
	letter-spacing: 0.15em;
	padding-left: 0px;
	position: relative;
	text-transform: uppercase;
	display: block;
}

.quote-caption {
	display: inline;
}

blockquote cite a,
.quote-caption a {
	color: #808080;
}

address {
	margin: 0 0 34px;
}

pre {
	background: #f5f5f5;
	font-family: "Courier 10 Pitch", Courier, monospace;
	margin-bottom: 34px;
	padding: 14px;
	overflow: auto;
	max-width: 100%;
}

code, kbd, tt, var {
	font: 19px/1.7894736842 Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr, acronym {
	border-bottom: 1px dotted #000;
	cursor: help;
}

mark, ins {
	background: #000;
	color: #fff;
	text-decoration: none;
}

sup,
sub {
	font-size: 75%;
	height: 0;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	bottom: 1ex;
}

sub {
	top: .5ex;
}

small {
	font-size: 75%;
}

big {
	font-size: 125%;
}

figure {
	margin: 0 0 51px;
}

table,
th,
td {
	border: 1px solid #ededed;
}

table {
	border-collapse: separate;
	border-spacing: 0;
	border-width: 1px 0 0 1px;
	margin: 0 0 24px;
	width: 100%;
}

caption,
th,
td {
	font-weight: normal;
	text-align: left;
}

th {
	border-width: 0 1px 1px 0;
	font-weight: 700;
}

td {
	border-width: 0 1px 1px 0;
}

th, td {
	padding: 6px;
}

del {
	color: #9dabb0;
}


/*--------------------------------------------------------------
Forms
--------------------------------------------------------------*/

button,
input,
select,
textarea {
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-ms-border-radius: 0;
	-o-border-radius: 0;
	border-radius: 0;
	-webkit-transition: all 250ms ease;
	-moz-transition: all 250ms ease;
	-o-transition: all 250ms ease;
	transition: all 250ms ease;
}

button:focus,
input:focus,
select:focus,
textarea:focus {
	outline: none;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	padding: 5px 20px;
	background: #4a4a4a;
	border: 1px solid #000;
	color: white;
	cursor: pointer;
}

@media screen and (max-width: 767px) {
	button,
	input[type="button"],
	input[type="reset"],
	input[type="submit"] {
		padding: 5px 10px;
	}
}

button:hover,
button:focus,
button:active,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="button"]:active,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="reset"]:active,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="submit"]:active {
	background: #333;
}

button:hover,
button:focus,
button:active,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="button"]:active,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="reset"]:active,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="submit"]:active {
	border-color: #333;
}

input[type="checkbox"],
input[type="radio"] {
	padding: 0;
	/* Addresses excess padding in IE8/9 */
	margin: 0 5px 0 0;
}

input[type="search"]::-webkit-search-decoration {
	/* Corrects inner padding displayed oddly in S5, Chrome on OSX */
	-webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	/* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
	border: 0;
	padding: 0;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea {
	padding: 10px;
	width: 100%;
	background: none;
	border: 1px solid #f1f2f3;
}

@media screen and (max-width: 767px) {
	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="password"],
	input[type="search"],
	textarea {
		padding: 5px;
	}
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
	border: 1px solid #ddd;
}

textarea {
	overflow: auto;
	/* Removes default vertical scrollbar in IE6/7/8/9 */
	vertical-align: top;
	/* Improves readability and alignment in all browsers */
}

label {
	display: block;
	margin-bottom: 10px;
	font-weight: bold;
}
label[class*="radio"], label[class*="checkbox"] {
	margin-bottom: 0;
	font-size: 0.73em;
	font-weight: normal;
}

/* Password protected posts from */
.post-password-form label {
	display: block;
	margin-bottom: 0;
}
.post-password-form input[type="password"] {
	margin: 10px 0;
}

/* Links */
a {
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	transition: all 0.2s ease;
	color: var(--ghost-accent-color);
	text-decoration: none;
}

a:hover,
a:active,
a:focus {
	color: #333;
}

.page-links{
	color: #aaa;
}

.page-links a{
	font-weight: bold;
}


/*--------------------------------------------------------------
Accessibility
--------------------------------------------------------------*/

/* Text meant only for screen readers */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
}

.screen-reader-text:hover,
.screen-reader-text:active,
.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;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar */
}


/*--------------------------------------------------------------
Container
--------------------------------------------------------------*/

#page {
	background: #fff;
	max-width: 900px;
	overflow: hidden;
	padding: 20px;
	margin: 0 auto;
}

.content-area {
	float: left;
	width: 65.470085470085%;
	overflow: hidden;
}

.site-content {
	margin: 40px 0;
}

.site-content .widget-area {
	float: right;
	overflow: hidden;
	width: 31.111111111111%;
	font-size: 15px;
}


/*--------------------------------------------------------------
Masthead
--------------------------------------------------------------*/

#masthead {
	position: relative;
}

.branding {
	text-align: center;
	margin-bottom: 30px;
}

.site-title a {
	color: #000;
	font-size: 32px;
}

.header-wrapper {
	position: relative;
}

.header-image {
	height: 250px;
	max-width: 100%;
	background-size: cover;
}


/*--------------------------------------------------------------
Menu
--------------------------------------------------------------*/

.main-navigation {
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
	width: 100%;
	margin: 0;
	padding: 14px 0;
	z-index: 999;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

.main-navigation li {
	display: inline-block;
	position: relative;
	margin: 0 15px 0 0;
}

.main-navigation li:last-child {
	margin: 0;
}

.main-navigation a {
	color: #333;
	display: block;
	text-decoration: none;
	padding: 0;
}

.main-navigation a:hover {
	color: var(--ghost-accent-color);
	display: block;
}

.main-navigation ul ul {
	float: left;
	position: absolute;
	top:4em;
	left: -999em;
	z-index: 99999;
	background: #fff;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	visibility: hidden;
	opacity: 0;
}


/* Small menu */
.menu-toggle {
	display: none;
}

@media screen and (max-width: 750px) {
	.main-navigation.toggled .nav-menu {
		display: block;
		border: none;
		background: none;
		color: #4a4a4a;
		text-align: center;
	}

	button.menu-toggle {
		display: block;
		border: none;
		background: none;
		color: #4a4a4a;
		margin: 0 auto;
		padding: 0;
	}

	.menu-toggle:hover {
		display: block;
		border: none;
		background: none;
		color: #333;
		padding: 0;
	}

	.menu-toggle:before {
		content: "\f0c9";
		font: var(--fa-font-solid);
		margin-right: 4px;
		font-weight: bold;
	}

	.toggled .menu-toggle:before {
		content: "\f00d";
		font: var(--fa-font-solid);
		margin-right: 6px;
	}


	.main-navigation ul {
		display: none;
		margin: 0;
		padding: 10px;
		width: 100%;
	}

	.main-navigation ul a {
		width: 100%;
		padding: 5px 0;
	}

	.nav-menu li {
		display: block;
		float: none;
		margin: 0;
	}

	.search-toggle {
		top: 5px;
	}

	.search-toggle:before {
		font-size: 15px;
	}
}

/* Social Links */
.social-navigation {
	margin: 0 0 15px;
	width: 100%;
	font: var(--fa-font-solid);
	overflow: hidden;
}

.social-links ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.social-links li {
	display: inline-block;
	margin: 0 15px 0 0;
	overflow: hidden;
	text-align: center;
}

.social-links a {
	font-size: 24px;
	float: left;
	text-align: center;
	margin: 0 15px 15px 0;
}

.social-links li:last-of-type {
	margin-right: 0;
}

.social-links a:before {
	color: #333;
	font: var(--fa-font-brands);
	font-weight: 400;
	font-size: 24px;
	text-align: center;
}

.social-links a:hover:before {
	color: var(--ghost-accent-color);
}

.social-navigation a[href$="/feed/"]:before {
	font: var(--fa-font-solid);
	content: "\f09e";
}

.social-links ul a[href*="facebook.com"]:before {
	content: "\f09a";
}

.social-links ul a[href*="x.com"]:before,
.social-links ul a[href*="twitter.com"]:before {
	content: "\e61b";
}

.social-links ul a[href*="dribbble.com"]:before {
	content: "\f17d";
}

.social-links ul a[href*="behance.net"]:before {
	content: "\f1b4";
}

.social-links ul a[href*="pinterest.com"]:before {
	content: "\f231";
}


.social-links ul a[href*="youtube.com"]:before {
	content: "\f16a";
}

.social-links ul a[href*="flickr.com"]:before {
	content: "\f16e";
}

.social-links ul a[href*="vimeo.com"]:before {
	content: "\f27d";
}

.social-links ul a[href*="instagram.com"]:before {
	content: "\f16d";
}

.social-links ul a[href*="codepen.io"]:before {
	content: "\f1cb";
}

.social-links ul a[href*="linkedin.com"]:before {
	content: "\f0e1";
}

.social-links ul a[href*="github.com"]:before {
	content: '\f09b';
}

.social-links ul a[href*="wordpress.com"]:before,
.social-links ul a[href*="wordpress.org"]:before {
	content: '\f411';
}

.social-links ul a[href*="tiktok.com"]:before {
	content: '\e07b';
}

.social-links ul a:before {
	content: "\f013";
}

.social-links ul a[href*="/feed"]:before {
	content: '\f09e';
	font: var(--fa-font-solid);
	font-weight: 900;
}

.social-links .nav-sign-up a:before {
	font: var(--fa-font-solid);
	content: "\f2bd";
}

.social-navigation a[href*="mailto:"]:before {
	font: var(--fa-font-solid);
	content: "\f0e0";
}


/*--------------------------------------------------------------
Content
--------------------------------------------------------------*/

.hentry {
	border-bottom: 1px solid #eee;
	margin: 0 0 2em;
	padding: 0 0 2em;
	overflow: hidden;
}

.hentry:last-of-type {
	border-bottom: 0;
}

.page-template .hentry,
.post-template .hentry {
	border-bottom: 0;
}

.entry-meta{
	position: relative;
	margin-top: 4px;
	color: #aaa;
}

.entry-title {
	font-size: 32px;
	color: #4a4a4a;
	line-height: 1.3;
	text-transform: capitalize;
}

.entry-title a {
	color: #4a4a4a;
}

.entry-title a:hover {
	color: var(--ghost-accent-color);
}

.entry-meta a {
	color: #aaa;
}

.entry-meta a:hover {
	color: #000;
}

.archive-title {
	margin: 0 0 1.5em;
	padding: 0 0 1.5em;
}

.archive-title:before {
	margin-right: 10px;
}

.byline,
.updated {
	display: none;
}

.single .byline,
.group-blog .byline {
	display: inline;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

/* Pagination */
.pagination {
	margin: 30px 0;
	text-align: center;
}
.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Navigation */
#content [class*="navigation"] {
	overflow: hidden;
}

[class*="navigation"] .nav-previous {
	float: left;
	width: 50%;
}

[class*="navigation"] .nav-next {
	float: right;
	text-align: right;
	width: 50%;
}


/*--------------------------------------------------------------
Sidebar
--------------------------------------------------------------*/

.widget {
	margin: 0 0 20px;
}

.widget-title,
.widget-title a {
	color: #4a4a4a;
	font-size: 16px;
	font-weight: 300;
	text-transform: uppercase;
}


.widget-title a img {
	display: none;
}

.widget ul {
	margin: 10px 0;
	list-style-type: none;
}

.widget p {
	color: #aaa;
}

.widget p a {
	font-weight: bold;
}

/* Search widget */
.widget_search .search-submit {
	display: none;
}

.tags li {
	display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
}

.tags a {
	background: #eee;
	color: #333;
	display: inline-block;
    padding: 4px 10px;
}

.tags a:hover {
	background: #333;
	color: #fff;
}

/* Recent Posts */
.recent-posts li {
	border-bottom: 1px solid #eee;
	padding: 5px 0;
}

/*--------------------------------------------------------------
Responsive
--------------------------------------------------------------*/

@media screen and (max-width: 750px) {
	#page{
		margin: 0 auto;
		padding: 40px;
	}

	.content-area {
		float: none;
		margin: 0;
		width: 100%;
	}

	.site-main {
		margin: 0;
	}

	.site-content {
		margin: 60px 0;
	}

	.site-content .widget-area {
		float: none;
		overflow: hidden;
		width: 100%;
	}

	.content-wrapper {
		padding: 0;
	}

	.entry-meta {
		position: relative;
		float: none;
		width: 100%;
		text-align: left;
		font-size: 15px;
		margin-top: 0px;
		margin-bottom: 1em;
		color: #aaa;
	}
}


/*--------------------------------------------------------------
Footer
--------------------------------------------------------------*/

.site-footer {
	clear: both;
	max-width: 1100px;
	margin: 0 auto;
	padding: 20px;
	text-align: center;
}

.site-info span {
	display: block;
}

/* The author credit area after the post */
.post-footer {
	position: relative;
	margin: 20px 0 0 0;
}

/* Create some space to the right for the share links */
.post-footer .author {
	margin-right: 180px;
	float: left;
}

/* Drop the share links in the space to the right.
   Doing it like this means it's easier for the author bio
   to be flexible at smaller screen sizes while the share
   links remain at a fixed width the whole time */

.sharing-buttons {
	list-style: none;
	margin: 15px 0 0;
	padding: 0;
}

.sharing-buttons li {
	display: inline-block;
	margin-right: 4px;
}

.sharing-buttons a {
	border-bottom: 2px solid #333;
	padding: 0;
}

.sharing-buttons a:hover {
	border-bottom: 2px solid transparent;
	padding: 0;
}


/* Content refers to styling all page and post content that is
created within the Ghost editor. */
.kg-width-wide {
	grid-column: wide-start / wide-end;
}

.kg-width-full {
	grid-column: full-start / full-end;
}

.kg-width-full img {
	width: 100%;
}

.gh-feature-image {
	display: block;
	margin-top: 51px;
}

.gh-feature-image a {
	display: block;
}

.gh-viewport {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.gh-outer {
	padding: 0 max(4vmin, 20px);
}

.gh-outer .gh-outer {
	padding: 0;
}

.gh-inner {
	margin: 0 auto;
	max-width: var(--container-width);
	width: 100%;
}

.gh-main {
	flex-grow: 1;
}

.gh-canvas > * {
	grid-column: main;
}

.kg-width-wide,
.kg-content-wide > div {
	grid-column: wide;
}

.kg-width-full {
	grid-column: full;
}

/* Default vertical spacing */
.gh-content > * + * {
	margin-top: 15px;
	margin-bottom: 0;
}

/* Remove space between full-width cards */
.gh-content > .kg-width-full + .kg-width-full:not(.kg-width-full.kg-card-hascaption + .kg-width-full) {
	margin-top: 0;
}

/* Add back a top margin to all headings,
unless a heading is the very first element in the post content */
.gh-content > [id]:not(:first-child) {
	margin-top: 15px;
}

/* Add drop cap setting */
.post-template .gh-content.drop-cap > p:first-of-type:first-letter {
	margin: 0 0.2em 0 0;
	font-size: 3.1em;
	float: left;
	line-height: 1;
	margin-left: -1px;
	font-weight: 700;
}

.has-serif-body.post-template .gh-content.drop-cap > p:first-of-type:first-letter {
	font-size: 3.2em;
}

/* Add a small margin between a heading and paragraph after it */
.gh-content > [id] + p {
   margin-top: 15px;
}

/* A larger margin before/after dividers, blockquotes and embeds */
.gh-content > :is(hr, blockquote, iframe) {
	position: relative;
	margin-top: 15px;
}

.gh-content > :is(hr, blockquote, iframe) + * {
	margin-top: 15px;
}

.gh-content .kg-callout-card .kg-callout-text,
.gh-content .kg-toggle-card .kg-toggle-content > :is(ul, ol, p) {
	font-size: 0.95em;
}

.gh-content :is(ul, ol) {
	padding-left: 28px;
}

.gh-content :is(li + li, li :is(ul, ol)) {
	margin-top: 8px;
}

.gh-content ol ol li {
	list-style-type: lower-alpha;
}

.gh-content ol ol ol li {
	list-style-type: lower-roman;
}

.gh-content hr {
	width: 100%;
	height: 1px;
	background-color: var(--color-border);
	border: 0;
}

.gh-content .gh-table {
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
}

.gh-content .gh-table table {
	width: 100%;
	font-size: 1.5rem;
	white-space: nowrap;
	vertical-align: top;
	border-spacing: 0;
	border-collapse: collapse;
}

.gh-content .gh-table table th {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--color-darkgrey);
	text-align: left;
	text-transform: uppercase;
}

.gh-content .gh-table table :is(th, td),
.gh-content .gh-table table td {
	padding: 6px 12px;
	border-bottom: 1px solid var(--color-border);
}

.gh-content .gh-table table :is(th, td):first-child {
	padding-left: 0;
}

.gh-content .gh-table table :is(th, td):last-child {
	padding-right: 0;
}

.gh-content pre {
	overflow: auto;
	padding: 16px;
	font-size: 1.5rem;
	line-height: 1.5em;
	background: var(--color-lighter-gray);
	border-radius: 6px;
}

.gh-content :not(pre) > code {
	vertical-align: baseline;
	padding: 0.15em 0.4em;
	font-weight: 400;
	font-size: 0.95em;
	line-height: 1em;
	background: var(--color-lighter-gray);
	border-radius: 0.25em;
}

/* 16. Cards
/* ---------------------------------------------------------- */

/* Add extra margin before/after any cards, except for when immediately preceeded by a heading */

.gh-content :not(.kg-card):not(table):not([id]) + :is(.kg-card, table) {
	margin-top: 2em;
}

.gh-content :is(.kg-card, table) + :not(.kg-card):not(table):not([id]) {
	margin-top: 2em;
}

.gh-content :not(.kg-card):not([id]) + .kg-card.kg-width-full {
	margin-top: 2em;
}

.gh-content .kg-card.kg-width-full + :not(.kg-card):not([id]) {
	margin-top: 2em;
}

/* Image */

.kg-image img {
	margin-right: auto;
	margin-left: auto;
	max-width: 100%;
	width: 100%;
	height: auto;
}

/* Embed */

.kg-embed-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

/* Gallery */

.kg-image[width][height],
.kg-gallery-image {
	cursor: pointer;
}

.kg-image-card a:hover,
.kg-gallery-image a:hover {
	opacity: 1 !important;
}

/* Toggle */

.kg-card.kg-toggle-card .kg-toggle-heading-text {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}

/* Callout */

.kg-callout-card.kg-card {
	border-radius: 0.25em;
}

/* Blockquote */

blockquote:not([class]) {
	padding-left: 2rem;
	border-left: 4px solid var(--ghost-accent-color);
}

blockquote.kg-blockquote-alt {
	font-style: normal;
	font-weight: 400;
	color: var(--color-secondary-text);
}

/* Button */

.kg-card.kg-button-card .kg-btn {
	height: unset;
	padding: .6em 1.2em;
	text-align: center;
	font-size: 1em;
	line-height: 1.2em;
}

/* Bookmark */

.kg-bookmark-card .kg-bookmark-container {
	border-radius: 0.25em !important;
}

.kg-bookmark-card .kg-bookmark-container:hover {
	opacity: 1;
}

.kg-bookmark-card a.kg-bookmark-container,
.kg-bookmark-card a.kg-bookmark-container:hover {
	background: var(--background-color) !important;
	color: var(--color-darker-gray) !important;
}

.kg-bookmark-card .kg-bookmark-content {
	padding: 1.15em;
}

.kg-bookmark-card .kg-bookmark-title {
	font-size: 0.9em;
}

.kg-bookmark-card .kg-bookmark-description {
	max-height: none;
	margin-top: 0.3em;
	font-size: 0.8em;
}

.kg-bookmark-card .kg-bookmark-metadata {
	font-size: 0.8em;
}

.kg-bookmark-card .kg-bookmark-thumbnail img {
	border-radius: 0 0.2em 0.2em 0;
}

/* Product */

.kg-product-card.kg-card .kg-product-card-image {
	margin-bottom: 12px;
	width: 100%;
}

.kg-product-card.kg-card a.kg-product-card-button {
	height: 2.8em;
	margin-top: 12px;
}

/* File */

.kg-file-card.kg-card .kg-file-card-container {
	padding: 0.6em;
}

.kg-file-card.kg-card .kg-file-card-contents {
	margin: 4px 8px 6px;
}

.kg-file-card.kg-card .kg-file-card-metadata {
	font-size: 0.9em;
}

.kg-file-card.kg-card .kg-file-card-filesize::before {
	margin-right: 6px;
	margin-left: 6px;
}

/* Caption */

figcaption {
	margin-top: 12px;
	text-align: center;
}

.kg-card.kg-width-full figcaption {
	padding: 0 16px;
}

figcaption a {
	color: var(--ghost-accent-color);
	text-decoration: underline;
}


/* 17. Comments
/* ---------------------------------------------------------- */

.gh-comments {
	margin-top: 48px;
}

.article-comments {
	background: #f7f7f7;
	padding: 4%;
}


/* 18. Recent posts
/* ---------------------------------------------------------- */

.post-template .gh-container {
	margin-top: 120px;
}

.post-template .gh-container-inner {
	display: block;
}

.post-template .gh-container.is-grid .gh-feed {
	grid-template-columns: repeat(4, 1fr);
}

.post-template .gh-container .gh-container-title {
	display: block;
}

/* 19. Archive
/* ---------------------------------------------------------- */

.gh-archive {
	display: grid;
	grid-template-columns: repeat(16, 1fr);
	gap: var(--grid-gap);
	margin-block: 80px 24px;
}

.gh-archive.has-image {
	margin-top: 48px;
}

.gh-archive-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--grid-gap);
	grid-column: 1 / -1;
	padding-bottom: clamp(40px, 2.73vw + 29.09px, 64px);
	border-bottom: 1px solid var(--color-border);
}

.gh-archive.has-image .gh-archive-inner {
	align-items: center;
	grid-column: 1 / -1;
}

.gh-archive:not(.has-sidebar):not(.has-image) .gh-archive-inner {
	grid-column: 3 / span 12;
}

.gh-archive .gh-article-image {
	grid-column: auto;
	margin-top: 0;
}

:is(.tag-template, .author-template) .gh-container {
	margin-top: 0;
}

.author-template .gh-archive-inner {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 24px;
}

.author-template .gh-article-image {
	margin-top: 0;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
}

.author-template .gh-article-title {
	font-size: 3.6rem;
}

.gh-author-meta {
	display: flex;
	gap: 10px;
	margin-top: 14px;
	font-size: 1.5rem;
	font-weight: 550;
	color: var(--color-secondary-text);
}

.gh-author-meta a {
	color: inherit;
}

.gh-author-social {
	display: flex;
	gap: 10px;
	align-items: center;
	padding-left: 3px;
}

.gh-author-social svg {
	width: 20px;
	height: 20px;
}

@media (max-width: 1199px) {
	.gh-archive {
		display: block;
	}
}