:root {
    /* Desktop sizes */
    --heading-hero-font-size: 40px;
    --heading-hero-line-height: 48px;
    --heading-1-font-size: 33px;
    --heading-1-line-height: 42px;
    --heading-2-font-size: 33px;
    --heading-2-line-height: 42px;
    --heading-3-font-size: 28px;
    --heading-3-line-height: 36px;
    --heading-4-font-size: 22px;
    --heading-4-line-height: 28px;
    --heading-5-font-size: 18px;
    --heading-5-line-height: 24px;
    --heading-6-font-size: 16px;
    --heading-6-line-height: 24px;
    /* Mobile first */
    --h1-font-size: var(--heading-4-font-size);
    --h1-line-height: var(--heading-4-line-height);
    --h2-font-size: var(--heading-5-font-size);
    --h2-line-height: var(--heading-5-line-height);
    --h3-font-size: var(--heading-6-font-size);
    --h3-line-height: var(--heading-6-line-height);
    --h4-font-size: var(--heading-6-font-size);
    --h4-line-height: var(--heading-6-line-height);
    --h5-font-size: var(--heading-6-font-size);
    --h5-line-height: var(--heading-6-line-height);
    --h6-font-size: var(--heading-6-font-size);
    --h6-line-height: var(--heading-6-line-height);
}

left_header,
h1,
h2,
h3,
h4,
h5 {
    margin: 2em 0 0.75em;
    font-weight: var(--font-weight-medium);
}

/* Tablet */
@media (min-width: 768px) {
    :root {
        --h1-font-size: var(--heading-3-font-size);
        --h1-line-height: var(--heading-3-line-height);
        --h2-font-size: var(--heading-4-font-size);
        --h2-line-height: var(--heading-4-line-height);
        --h3-font-size: var(--heading-5-font-size);
        --h3-line-height: var(--heading-5-line-height);
    }
}

/* Desktop */
@media (min-width: 1024px) {
    :root {
        --h1-font-size: var(--heading-1-font-size);
        --h1-line-height: var(--heading-1-line-height);
        --h2-font-size: var(--heading-2-font-size);
        --h2-line-height: var(--heading-2-line-height);
        --h3-font-size: var(--heading-3-font-size);
        --h3-line-height: var(--heading-3-line-height);
        --h4-font-size: var(--heading-4-font-size);
        --h4-line-height: var(--heading-4-line-height);
        --h5-font-size: var(--heading-5-font-size);
        --h5-line-height: var(--heading-5-line-height);
        --h6-font-size: var(--heading-6-font-size);
        --h6-line-height: var(--heading-6-line-height);
    }
}

left_header,
.left_header {
    font-size: var(--h1-font-size);
    line-height: var(--h1-line-height);
    display: block;
}

h1,
.h1 {
    font-size: var(--h2-font-size);
    line-height: var(--h2-line-height);
    margin-bottom: 30px;
}

h2,
.h2 {
    font-size: var(--h3-font-size);
    line-height: var(--h3-line-height);
}

h3,
.h3 {
    font-size: var(--h4-font-size);
    line-height: var(--h4-line-height);
}

h4,
.h4 {
    font-size: var(--h5-font-size);
    line-height: var(--h5-line-height);
}

h5,
.h5 {
    font-size: var(--h6-font-size);
    line-height: var(--h6-line-height);
}

/* Special heading styling */
.main--news .article > h1:first-child {
    color: var(--color-primary);
}

/* Aside headings */
.content__aside left_header,
.content__aside left_header_news {
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
    transform: translateX(-1px); /* Removes some of the line spacing */
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    padding-right: 20px;
}

.content__aside left_header_news {
    color: var(--color-skin);
    font-size: 22px;
    line-height: 28px;
}

    .content__aside left_header::after,
    .content__aside left_header_news::after {
        content: '';
        margin: 25px 0 0 1px;
        display: block;
        width: 45px;
        height: 3px;
        background-color: var(--color-primary);
    }

    .content__aside left_header_news::after {
        margin: 20px 0 0 1px;
    }

@media (min-width: 768px) {
    .content__aside left_header {
        transform: translateX(-2px);
    }

    .content__aside left_header_news {
        font-size: 28px;
        line-height: 36px;
    }

        .content__aside left_header::after,
        .content__aside left_header_news::after {
            width: 30px;
            height: 4px;
            margin-left: 2px;
        }
}

@media (min-width: 1024px) {
    .content__aside left_header::after,
    .content__aside left_header_news::after {
        margin-top: 40px;
    }
}