.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}

.brand-lockup__icon {
    display: block;
    height: 44px;
    width: auto;
    flex-shrink: 0;
}

.brand-lockup__text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.brand-lockup__portal {
    font-size: 11px;
    font-weight: var(--fw-regular);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.brand-lockup__name {
    display: flex;
    flex-direction: column;
    line-height: 0.78;
}

.brand-lockup__name-line {
    font-size: var(--fs-h5);
    font-weight: var(--fw-black);
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

.brand-lockup__tagline {
    display: block;
    font-size: 10px;
    font-weight: var(--fw-medium);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: var(--space-1);
}

.brand-lockup--dark .brand-lockup__portal,
.brand-lockup--dark .brand-lockup__name-line {
    color: var(--color-heading);
}

.brand-lockup--light .brand-lockup__portal,
.brand-lockup--light .brand-lockup__name-line {
    color: var(--color-white);
}

.brand-lockup--light .brand-lockup__tagline {
    color: var(--color-gray-light);
}