@mixin giant-3() {
    font-size: var(--font-size-giant-3);
    font-weight: var(--font-weight-600);
    line-height: 52px;
}

@mixin giant-2() {
    font-size: var(--font-size-giant-2);
    font-weight: var(--font-weight-600);
    line-height: 46px;
}

@mixin giant-1() {
    font-size: var(--font-size-giant-1);
    font-weight: var(--font-weight-600);
    line-height: 40px;
}

@mixin large-2() {
    font-size: var(--font-size-large-2);
    font-weight: var(--font-weight-600);
    line-height: 32px;
}

@mixin large-2-secondary() {
    @include large-2;

    color: var(--color-foreground-secondary);
}

@mixin large-1() {
    font-size: var(--font-size-large-1);
    font-weight: var(--font-weight-600);
    line-height: 28px;
}

@mixin large-1-secondary() {
    @include large-1;

    color: var(--color-foreground-secondary);
}

@mixin medium() {
    font-size: var(--font-size-medium);
    line-height: 24px;
}

@mixin medium-bold() {
    @include medium;

    font-weight: var(--font-weight-600);
}

@mixin medium-secondary() {
    @include medium;

    color: var(--color-foreground-secondary);
}

@mixin regular() {
    font-size: var(--font-size-body);
    line-height: 20px;
}

@mixin regular-bold() {
    @include regular;

    font-weight: var(--font-weight-600);
}

@mixin regular-secondary() {
    @include regular;

    color: var(--color-foreground-secondary);
}

@mixin small() {
    font-size: var(--font-size-small);
    line-height: 16px;
}

@mixin small-bold() {
    @include small;

    font-weight: var(--font-weight-600);
}

@mixin small-secondary() {
    @include small;

    color: var(--color-foreground-secondary);
}