.brandMark32 {
    display: flex;
    width: 32px;
    height: 25px;
    justify-content: center;
    align-items: center;
    aspect-ratio: 32/25;
}
.brandMark48 {
    display: flex;
    width: 48px;
    height: 35px;
    justify-content: center;
    align-items: center;
    aspect-ratio: 48/35;
}
.brandMark64 {
    display: flex;
    width: 64px;
    height: 49.727px;
    justify-content: center;
    align-items: center;
    aspect-ratio: 64.00/49.73;
}
.brandMark128 {
    display: flex;
    width: 128px;
    height: 99.453px;
    justify-content: center;
    align-items: center;
    aspect-ratio: 128.00/99.45;
}

.brandLogo64 {
    display: flex;
    height: 48px;
    align-items: center;
    gap: 12px;
    align-self: stretch;
}

.brandLogo32 {
    display: flex;
    height: 32px;
    align-items: center;
    gap: 6px;
    align-self: stretch;
}

.brandName {
    display: flex;
    width: 213.703px;
    flex-direction: column;
    align-items: flex-start;
}

.brandHeading {
    color: #FFF;
    margin-bottom: 0px;
    font-size: 1.63rem;
}

/* Keep the wordmark independent from the sitewide heading typeface. */
.brandName .brandHeading {
    font-family: var(--font-brand);
}

.brandSubHeading {
    color: var(--slate-300);
    line-height: 133%; /* 15.96px */
}