html {
	box-sizing: border-box;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

body {
	min-width: 320px;
	font-family: var(--body-large-font-desktop, sans-serif);
	color: var(--text-color, inherit);
	font-size: 1.125em;
	font-weight: var(--body-large-weight-desktop, 400);
	line-height: var(--body-large-line-height-rem-smartphone, 1.6666);
}

h1,h2,h3,h4,h5,h6 {
	font-family: var(--heading-large-font-desktop, inherit);
	color: var(--color-neutral-800, inherit);
	margin: 1rem 0;	
	font-weight: var(--heading-large-weight-desktop, 400);
}


h1 {
	font-size: var(--display-large-size-rem-smartphone);
	line-height: var(--display-large-line-height-rem-smartphone);
}

h2 {
	font-size: var(--display-large-size-rem-smartphone);
	line-height: var(--display-large-line-height-rem-smartphone);
}

h3 {
	font-size: var(--heading-medium-size-rem-smartphone);
	line-height: var(--heading-medium-line-height-rem-smartphone);
}

h4 {
	font-size: var(--heading-small-size-rem-smartphone);
	line-height: var(--heading-small-line-height-rem-smartphone);
}

@media (min-width: 45em) { /* 720 */
	body {
		font-size: 1.125rem;
		line-height: var(--body-large-line-height-rem-desktop, var(--body-large-line-height-rem-smartphone));
	}

	h1 {
		font-size: var(--display-large-size-rem-desktop, var(--display-large-size-rem-smartphone));
		line-height: var(--display-large-line-height-rem-desktop, var(--display-large-line-height-rem-smartphone));
	}

	h2 {
		font-size: var(--display-large-size-rem-desktop, var(--display-large-size-rem-smartphone));
		line-height: var(--display-large-line-height-rem-desktop, var(--display-large-line-height-rem-smartphone));
	}

	h3 {
		font-size: var(--heading-medium-size-rem-desktop, var(--heading-medium-size-rem-smartphone));
		line-height: var(--heading-medium-line-height-rem-desktop, var(--heading-medium-line-height-rem-smartphone));
	}

	h4 {
		font-size: var(--heading-small-size-rem-desktop, var(--heading-small-size-rem-smartphone));
		line-height: var(--heading-small-line-height-rem-desktop, var(--heading-small-line-height-rem-smartphone));
	}

}

hr {
	background-color: var(--color-neutral-200);
	border: 0;
	height: 1px;
}

ul, ol {
	margin: var(--space-normal) 0;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dl {
	margin: var(--space-normal) 0;	
}

dl dl {
	margin: 0;	
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 0 0 1em;
}

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

figure {
	margin: var(--space-large) 0;
}

figcaption {
	font-size: 0.875em;
}

table {
	margin: var(--space-normal) 0;
	width: 100%;
	height: auto;
}

/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {
	color: var(--color-primary-500, #4169e1);
	text-decoration: none;

	&:focus {
	outline: thin dotted;
	}

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

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

/* Temp? Based on my-account mockup */
label {
	font-weight: 700;
}

/* All images in articles get rounded corners and a border */
img[class^="attachment-"] {
	border: 1px solid var(--gray-light);
	border-radius: 10px;
}

/* Blockqoutes in regular content */
blockquote {
	font-size: var(--title-large-size-rem-smartphone);
	line-height: var(--title-large-line-height-rem-smartphone);
	margin: var(--space-large) 0;
}

.archive-posts-wrapper {
	padding: 0 var(--gutter-width);	
}