h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-main);
}

h1 {
    font-size: var(--h1-size);
    line-height: var(--h1-line-height);
    font-family: var(--font-title);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--current-title);
}

h2 {
    font-size: var(--h2-size);
    color: var(--secondary);
    font-weight: 500;
}

h3 {
    color: var(--secondary);
    font-weight: 500;
}

.title-row {
    font-size: var(--h1-size);
    overflow: visible;
    position: relative;
    padding-inline: 2rem;
}

.title-container {
    width: fit-content;
    position: relative;
}

.title-sub {
    display: inline-block;
    text-transform: none;
    font-family: var(--font-main);
    font-size: var(--h2-size);
    color: var(--secondary);
    font-weight: 500;
    padding-left: 7rem;
}

.title-bg {
    background-color: var(--current-highlight);
    position: absolute;
    top: 40%;
    bottom: 0;
    width: 80%;
    right: -4rem;
    border-radius: 1rem;
}

.title-bg.full {
    width: unset;
    left: -1rem;
    right: -1rem;
}