Размер маски

<div class="grid grid-col-2 sm:grid-col-4 gap-3">
  <div class="flex flex-col gap-1">
    <div class="radius-1 border border-dashed border-outline-variant">
      <div class="h-e4 bg-primary demo-mask-leaf mask-repeat-none mask-center mask-auto"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">mask-auto</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="radius-1 border border-dashed border-outline-variant">
      <div class="h-e4 bg-primary demo-mask-leaf mask-repeat-none mask-center mask-cover"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">mask-cover</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="radius-1 border border-dashed border-outline-variant">
      <div class="h-e4 bg-primary demo-mask-leaf mask-repeat-none mask-center mask-contain"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">mask-contain</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="radius-1 border border-dashed border-outline-variant">
      <div class="h-e4 bg-primary demo-mask-leaf mask-repeat-none mask-center mask-full"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">mask-full</code>
  </div>
</div>

/* Demo only. The Framework has no class for mask-image, so each example sets
   its own. The mask is inline on purpose: an example renders in a sandboxed
   frame with an opaque origin, and a mask image is fetched in CORS mode, so a
   file from the site is refused and the masked element disappears with it. */
/* The SVG carries its own size, so mask-auto shows it at that size; with
   preserveAspectRatio='none' mask-full stretches it to the box. */
.demo-mask-leaf {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 512 512' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M252 468c-13-93-9-155-37-206-18-33-47-56-88-70 8 63 34 106 82 130-19-85-8-158 35-218 50 69 57 149 18 239 17-70 57-116 121-137-5 74-42 123-111 148-10 37-12 75-8 114h-12Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 512 512' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M252 468c-13-93-9-155-37-206-18-33-47-56-88-70 8 63 34 106 82 130-19-85-8-158 35-218 50 69 57 149 18 239 17-70 57-116 121-137-5 74-42 123-111 148-10 37-12 75-8 114h-12Z'/%3E%3C/svg%3E");
}