.brand-logo {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 15.7rem;

    &__black {
        display: none;
    }

    &__icon {
        height: 100%;
        color: var(--brand-logo-color-icon, rgb(241, 22, 47));
        width: calc(24% - .4rem);
        flex-shrink: 0;
        margin-right: 1.2rem;
    }

    &__text {
        height: 100%;
        color: var(--brand-logo-color-text, var(--color-text-light, rgb(72, 76, 84)));
        fill: var(--brand-logo-color-text, var(--color-text-light, rgb(72, 76, 84)));
        transform: translate(0px, -7%);
        width: calc(75% - .8rem);
        flex-shrink: 0;
    }

    > svg {
        > g {
            @include breakpoint-down('lg') {
                display: none;
            }
        }
    }
}