.kbrio-hub-logo {
    --kbrio-hub-logo-width: 250px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: calc(var(--kbrio-hub-logo-width) * 0.055);
    row-gap: 0;
    width: min(100%, var(--kbrio-hub-logo-width));
    color: #4c4c4e;
    text-decoration: none;
}

.kbrio-hub-logo__wordmark {
    display: block;
    width: 100%;
    height: auto;
}

.kbrio-hub-logo__product {
    display: inline-flex;
    align-items: center;
    padding: calc(var(--kbrio-hub-logo-width) * 0.024) calc(var(--kbrio-hub-logo-width) * 0.044) calc(var(--kbrio-hub-logo-width) * 0.012);
    border-radius: calc(var(--kbrio-hub-logo-width) * 0.02);
    background: #c7271d;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: calc(var(--kbrio-hub-logo-width) * 0.106);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
}

.kbrio-hub-logo__subtitle {
    grid-column: 1 / 3;
    width: 100%;
    margin-top: calc(var(--kbrio-hub-logo-width) * 0.032);
    color: #a2a2a5;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: clamp(7px, calc(var(--kbrio-hub-logo-width) * 0.04), 10px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.22em;
    text-align: center;
    text-indent: 0.22em;
    text-transform: uppercase;
    white-space: nowrap;
}