/* Block: motif
 *
 * Figma draws the mark at 144px on the service hero, 150px on the statement,
 * 400px beside the long copy and 50px inside cards. Native ratio 46.48 x 50.
 */
.motif {
    display: inline-block;
    line-height: 0;
}

.motif__mark {
    display: block;
    width: 100%;
    height: auto;
}

.motif--sm {
    width: calc(46.48 * var(--tgc-u));
}

.motif--md {
    width: calc(134.13 * var(--tgc-u));
}

.motif--lg {
    width: calc(139.44 * var(--tgc-u));
}

.motif--xl {
    width: calc(371.84 * var(--tgc-u));
}

/* On the violet hero the solids go white; on cream they take the brand violet.
   The pale overlaps stay lilac either way, which is what the design does. */
.motif--light {
    color: var(--theme-white);
    --tgc-motif-accent: var(--tgc-lilac);
}

.motif--violet {
    color: var(--tgc-violet);
    --tgc-motif-accent: var(--tgc-lilac);
}

@media (max-width: 768px) {
    .motif--md,
    .motif--lg {
        width: 96px;
    }

    .motif--xl {
        width: calc(200 * var(--tgc-u));
    }
}