/* Block: wordmark
 *
 * The lockup is the Figma vector (images/icons/wordmark.svg), so sizes are
 * widths on the artwork rather than a font size. Native ratio is 91 x 47.
 */
.wordmark {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 1;
    color: var(--tgc-ink);
}

.wordmark__mark,
.wordmark__image {
    display: block;
    width: 100%;
    height: auto;
}

.wordmark--sm {
    width: calc(91 * var(--tgc-u));
}

.wordmark--md {
    width: calc(116 * var(--tgc-u));
}

.wordmark--lg {
    width: calc(360 * var(--tgc-u));
}

/* On violet the lockup is white with a lilac dot, which is how the service
   page artboards draw it — not a white dot. */
.wordmark--light {
    color: var(--theme-white);
    --tgc-wordmark-dot: var(--tgc-lilac);
}

.wordmark:hover {
    color: var(--tgc-violet);
}

.wordmark--light:hover {
    color: var(--theme-white);
    opacity: 0.85;
}

@media (max-width: 768px) {
    .wordmark--sm {
        width: 72px;
    }

    .wordmark--lg {
        width: calc(210 * var(--tgc-u));
    }
}