h1,
h2,
h3,
h4 {
	line-height: $line-height-medium;
	margin-top: $spacing-none;
	padding-top: $spacing-none;
}

h1,
.txt-h1 {
	color: $color-secondary;
	font-family: $font-secondary;
	font-size: $font-size-large;
	font-weight: $font-weight-black;
	line-height: $line-height-medium;
	margin: $spacing-none;
	text-transform: capitalize;

	@media (min-width: $breakpoint-small) {
		font-size: $font-size-xlarge;
		line-height: $line-height-medium;
	}
}

h2,
.txt-h2 {
	font-size: $font-size-medium;
	font-weight: $font-weight-light;

	@media (min-width: $breakpoint-small) {
		font-size: $font-size-large;
	}
}

h3,
.txt-h3 {
	font-size: $font-size-small;
	font-weight: $font-weight-medium;
	margin-bottom: 1rem;

	@media (min-width: $breakpoint-small) {
		font-size: $font-size-medium;
	}
}

h4,
.txt-h4 {
	color: $color-secondary;
	font-size: $font-size-xsmall;
	font-weight: $font-weight-regular;
	text-transform: uppercase;

	@media (min-width: $breakpoint-small) {
		font-size: $font-size-small;
	}
}

p,
ul,
ol,
dl {
	font-size: $font-size-tiny;
	max-width: $width-content;
	margin: $spacing-none $spacing-none $spacing-small;

	@media (min-width: $breakpoint-small) {
		font-size: $font-size-xsmall;
	}

	@media (min-width: $breakpoint-medium) {
		margin-right: $spacing-medium;
	}

	&.u-lighten {
		font-weight: $font-weight-light;
	}
}

ul,
ol,
dl {
	padding-left: $spacing-medium;
}

a {
	color: $color-secondary;
	font-weight: $font-weight-medium;
	text-decoration: none;

	&:hover,
	&:focus {
		text-decoration: underline;
	}

	abbr {
		text-decoration: none;
	}
}

sup {
	color: $color-accent-secondary;
	font-size: $font-size-fine;
	font-weight: $font-weight-medium;
	text-transform: uppercase;

	a {
		color: $color-secondary;
	}
}

pre,
code {
	font-family: $font-tertiary;
	font-size: $font-size-fine;
	margin: $spacing-none;
}

pre code {
	background: $color-base;
	color: $color-primary;
	display: block;
	padding: $spacing-none;
}

code {
	background: $color-primary;
	color: $color-base;
	display: inline-block;
	padding: $spacing-tiny $spacing-small;

	&.is-clean {
		background: $color-base;
		color: $color-primary;
		display: inline-block;
		padding: $spacing-none;
	}

}

p > code,
li > code {
	padding: $spacing-none $spacing-tiny;
}
