:root {
    --font-main: 'Saira', Arial, sans-serif;
    --font-heading: 'Russo One', Arial, sans-serif;
    --font-size-base: 16px;
    --font-size-sm: 0.8rem;
    --font-size-lg: 1.4rem;
    --font-size-xxl: 2.4rem;

    --line-height: 1.5;
    --baseline: calc(1rem * var(--line-height));
}


@font-face {
    font-family: 'Russo One';
    src: url('/fonts/russo-one-v17-latin-regular.woff2') format('woff2'),
         url('/fonts/russo-one-v17-latin-regular.woff2') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Saira';
    src: url('/fonts/saira-v21-latin-regular.woff2') format('woff2'),
         url('/fonts/saira-v21-latin-regular.woff2') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Saira';
    src: url('/fonts/saira-v21-latin-800.woff2') format('woff2'),
         url('/fonts/saira-v21-latin-800.woff2') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: var(--font-main);
}

h1,
h2 {
    font-family: var(--font-heading);
    font-size: var(--font-size-xxl);
    color: var(--text);
    margin-bottom: calc(var(--baseline) * 0.75);
}

h3,
h4,
h5,
h6 {
    font-size: var(--font-size-lg);
    font-weight: 400;
    color: var(--text);
}

p {
    color: var(--text);
}


h1 {
    margin-bottom: var(--baseline);
}

h1>.sub {
    padding: 0;
    display: block;
    font-size: var(--font-size-lg);
    line-height: 1;
}

h2,
h3,
h4,
h5,
h6 {
    margin-bottom: calc(var(--baseline) * 0.75);
}

p {
    margin-bottom: var(--baseline);
}

.section {
    padding: calc(var(--baseline) * 2) 0;
}