body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@font-face {
    font-family: "Rubik";
    font-style: normal;
    src: url("../../fonts/Rubik-Light-7e567274cc319dd6df6baa0a59a93793.ttf") format('ttf');
    font-weight: 300;
}

@font-face {
    font-family: 'Brandon Text';
    src: url("../../fonts/brandon-text-bold-9e9043680078f6696983f65051cb0b9e.ttf"),
        url("../../fonts/brandon-text-bold-9e9043680078f6696983f65051cb0b9e.ttf");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat Bold';
    src: url('../../fonts/Montserrat-Bold.woff2') format('woff2'),
        url('../../fonts/Montserrat-Bold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

h1,
.h1 {
    font-family: var(--h1-family);
    font-size: var(--h1-size);
    font-weight: var(--h1-weight);
    line-height: var(--h1-line-height);
    letter-spacing: var(--h1-letter-spacing);
}

h2,
.h2 {
    font-family: var(--h2-family);
    font-size: var(--h2-size);
    font-weight: var(--h2-weight);
    line-height: var(--h2-line-height);
    letter-spacing: var(--h2-letter-spacing);
}

.h2-s {
    font-family: var(--h2-s-family);
    font-size: var(--h2-s-size);
    font-weight: var(--h2-s-weight);
    line-height: var(--h2-s-line-height);
    letter-spacing: var(--h2-s-letter-spacing);
    text-transform: uppercase;
    color: var(--red);
}

.bg-red .h2-s {
    color: var(--white);
}

h3,
.h3 {
    font-family: var(--h3-family);
    font-size: var(--h3-size);
    font-weight: var(--h3-weight);
    line-height: var(--h3-line-height);
    letter-spacing: var(--h3-letter-spacing);
}

h4,
.h4 {
    font-family: var(--h4-family);
    font-size: var(--h4-size);
    font-weight: var(--h4-weight);
    line-height: var(--h4-line-height);
    letter-spacing: var(--h4-letter-spacing);
}

p {
    font-family: var(--p-family);
    font-size: var(--p-size);
    font-weight: var(--p-weight);
    line-height: var(--p-line-height);
    letter-spacing: var(--p-letter-spacing);
}

.p-s {
    font-size: var(--p-s-size);
}

.p-l {
    font-family: var(--p-family);
    font-size: var(--h4-size);
    line-height: var(--h4-line-height);
    letter-spacing: var(--h4-letter-spacing);
}

.h2-s + h2 {
    margin-top: 0.5rem;
}