@mixin cd28-title($desktop-size, $mobile-size, $weight, $color) {
	color: $color;
	letter-spacing: $letterspacing-1;
	line-height: $lineheight-1;
	font-size: $mobile-size;
	font-weight: $weight;
	margin-top: 0em;
	margin-bottom: 1em;

	@media($min-desktop-viewport) {
		font-size: $desktop-size;
	}
}

.cd28-title-header {
	margin: 0 0 0 1em;
	line-height: 1;
	font-weight: $font-weight-4;
	letter-spacing: $letterspacing-0;
	color: $gray-7;
}

@mixin cd28-big-title($desktop-header-size, $mobile-header-size) {
	position: relative;
	min-height: 2em;
	display: flex;
	flex-direction: column;
	justify-content: end;
	padding-bottom: 1em;
	hyphens: auto;

	& .cd28-title-header {
		font-size: $mobile-header-size;

		@media ($min-desktop-viewport) {
			font-size: $desktop-header-size;
		}
	}

	&::before {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 2.5em;
		height: 0.75em;
		display: block;
		content: "";
		background: url("img/title-img-yellow.svg");
		background-size: 100% 100%;
	}

	@media($min-desktop-viewport) {
		padding-left: 2.6em;
		padding-bottom: 0;
		&::before {
			bottom: auto;
			top: 1em;
		}
	}
}

h1 {
	@include cd28-title($font-size-9, $font-size-6, $font-weight-8, $gray-9);
}

%big-title-1 {
	@extend h1;
	@include cd28-big-title($font-size-7, $font-size-4);
}

h2 {
	@include cd28-title($font-size-8, $font-size-7, $font-weight-8, $gray-9);
}

%big-title-2 {
	@extend h2;
    @include cd28-big-title($font-size-6, $font-size-5);
}

h3 { @include cd28-title($font-size-7, $font-size-6, $font-weight-7, $gray-9); }
h4 { @include cd28-title($font-size-6, $font-size-5, $font-weight-7, $gray-9); }
h5 { @include cd28-title($font-size-5, $font-size-3, $font-weight-7, $gray-9); }
h6 { @include cd28-title($font-size-4, $font-size-2, $font-weight-6, $gray-9); }

header, main, footer {
	font-weight: $font-weight-5;
	font-size: $font-size-1;
	line-height: $lineheight-3;
	letter-spacing: $letterspacing-0;

	& .small {
		font-size: $font-size-0;
	}

	& .large {
		font-size: $font-size-2;
	}
}

%title {
	letter-spacing: $letterspacing-1;
	line-height: $lineheight-1;
	@media ($max-mobile-viewport) {
		font-size: $font-size-3;
	}
}

@mixin link($color, $hover-color) {
	color: $color;
	background: transparent;

	&:hover, &:focus {
		outline: none;
		background: $color;
		color: $hover-color;
		font-weight: $font-weight-5;
		text-decoration: none;
	}
}

a {
	@include link($blue-5, white);
}

.cd28-external-link {
	&::after {
		content: "\ecaf"; // external-link-line
		font-family: "RemixIcon";
	}
}
