@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;800&display=swap');

.brand-wordmark {
    --brand-primary-size: 1.25rem;
    display: inline-flex;
    min-width: 0;
    max-width: 100%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    color: #111416;
    font-family: "Montserrat", sans-serif;
    font-size: var(--brand-primary-size);
    font-synthesis: none;
    line-height: 1;
    text-align: left;
    text-transform: none;
    vertical-align: middle;
}

.brand-wordmark__primary,
.brand-wordmark__secondary {
    display: block;
    max-width: 100%;
    text-align: left;
    overflow-wrap: anywhere;
}

.brand-wordmark__primary {
    font-size: 1em;
    font-weight: 800;
    letter-spacing: normal;
}

.brand-wordmark__secondary {
    margin-top: .5em;
    color: #8b8e91;
    font-size: .36em;
    font-weight: 400;
    letter-spacing: .16em;
}

.brand-wordmark--footer {
    --brand-primary-size: 1.2rem;
}

.brand-wordmark--sidebar {
    --brand-primary-size: 1.05rem;
}

.brand-wordmark--auth {
    --brand-primary-size: 1.35rem;
}

.brand-wordmark--preview {
    --brand-primary-size: 1.65rem;
}

.brand-wordmark--showcase {
    --brand-primary-size: clamp(1.8rem, 5vw, 3.6rem);
}

.brand-wordmark--footer,
.brand-wordmark--sidebar,
.brand-wordmark--showcase {
    color: #fff;
}

.brand-wordmark--footer .brand-wordmark__secondary,
.brand-wordmark--sidebar .brand-wordmark__secondary,
.brand-wordmark--showcase .brand-wordmark__secondary {
    color: #fff;
}

@media (max-width: 25rem) {
    .brand-wordmark--header {
        --brand-primary-size: 1.08rem;
    }
}