title: How can i set a max-values to a css mask?
body: <p>i am using this code to implemente a svg mask in top of a video layer. It works great, but how can i set a <code>max</code> value to the <code>css-mask</code>, so i can control the maxium size of it?</p>
  
  <p>My Code looks like this at moment:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    margin: 0;
    padding: 0;
  }
  
  .container {
    position: relative;
    height: 100vh;
    background: #000;
    color: #fff;
  }
  
  .headline-wrapper {
    position: absolute;
    top: 50%;
    transform:translateY(-180%);
    left: 1.4%;
  }
  
  .headline {
    margin: 0;
    font-size: min(8vw, 82px);
    font-weight: 600;
    text-transform: uppercase;
  }
  
  .description-wrapper {
    position: absolute;
    top: 50%;
    transform:translateY(120%);
    left: 1.4%;
  }
  
  .description {
    margin: 0;
    font-size: min(5vw, 57px);
    font-weight: 400;
  }
  
  .video-wrapper {
    height: 100%;
     -webkit-mask:url('data:image/svg+xml;utf8,&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -10 70 12"&gt;&lt;text font-family="monospace"&gt;MASK&lt;/text&gt;&lt;/svg&gt;') center/contain no-repeat;
             mask:url('data:image/svg+xml;utf8,&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -10 70 12"&gt;&lt;text font-family="system-ui"&gt;MASK&lt;/text&gt;&lt;/svg&gt;') center/contain no-repeat;
  
  }
  
  .video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display:block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section&gt;
    &lt;div class="container"&gt;
      &lt;div class="headline-wrapper"&gt;
        &lt;h3 class="headline"&gt;Headline&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="description-wrapper"&gt;
        &lt;p class="description"&gt;Description&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="video-wrapper"&gt;
        &lt;video class="video" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" muted loop autoplay="true"&gt;&lt;/video&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My Goal is to set a max property to the css mask, similar to font-size property. How can i do that, so i can prevent overflow like this:</p>
  
  <p><a href="https://i.stack.imgur.com/CH3XG.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CH3XG.jpg" alt="enter image description here"></a></p>