h1, h2, h3 {
    font-weight: 800;
    color: var(--heading-color);
    text-wrap: balance;
}

h1 {
    font-size: var(--font-xxlarge);
}

h2 {
    font-size: var(--font-xlarge);
}

h3 {
    font-size: var(--font-medium);
    color: var(--heading-secondary-color);
}

hgroup {
    max-width: 110rem;
    display: flex;
    flex-direction: column;
    gap: 2.75rem;
    text-align: center;
    text-wrap: balance;

    span {
        font-weight: 300;
        color: var(--heading-color);
        font-size: var(--font-large);
        line-height: 1.5;
    }
}

p, li {
    font-size: var(--font-xsmall);
    line-height: 1.5;
}

p:not(:last-child) {
    margin-bottom: 2rem;
}

.bulleted {
    &ul, &ol {
        margin-bottom: 2rem;
    }

    li {
        list-style: outside;
        margin-left: 2rem;
    }
}

a, a:visited {
    color: var(--font-color);
    text-decoration: none;

    &:hover {
        color: var(--font-color-highlight);
    }
}

strong {
    font-weight: 600;
}

em {
    font-style: italic;
}

.highlight {
    color: var(--heading-secondary-color);
    font-size: var(--font-xxlarge);
    font-weight: 800;
    text-align: center;
    text-wrap: balance;

    @media screen and (max-width: 800px) {
        font-size: var(--font-large);
    }
}

.button-group {
    display: grid;
    gap: 2rem;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;

    .button {
        justify-content: center;
        width: 100%;
    }

    @media screen and (max-width: 800px) {
       grid-auto-flow: unset;
    }
}

.button, a.button {
    font-size: var(--font-small);
    font-weight: 600;
    height: 5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-inline: 1.5rem;
    cursor: pointer;

    color: var(--button-color);
    background-color: var(--button-background);
    border: 4px solid var(--button-border);

    &.primary {
        --button-color: var(--button-primary-color);
        --button-background: var(--button-primary-background);
        --button-border: var(--button-primary-border);
        --button-hover-color: var(--button-primary-hover-color);
        --button-hover-background: var(--button-primary-hover-background);
        --button-hover-border: var(--button-primary-hover-border);
    }

    &:hover {
        color: var(--button-hover-color);
        background-color: var(--button-hover-background);
        border-color: var(--button-hover-border);
    }

    svg {
        height: var(--font-small);
    }
}