<style>
:root {
    --color-primary: 0 146 11;
    --color-secondary: 24 150 255;
}
 body {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     background: var(--background-default-grey);
 }
 article {
     margin: 0;
     padding: 1rem 2rem;
     color: var(--text-default-grey);
     position: relative;
 }
 .bg-gradient {
    will-change: transform;
    backface-visibility: hidden;
    background-image: radial-gradient(50vMax at -10vw -20vw,rgb(var(--color-secondary) / 1),rgb(var(--color-secondary) / 80%) 40%,rgb(var(--color-secondary) / 0%)),radial-gradient(60vMax at 100vw 100vh,rgb(var(--color-primary) / 1),rgb(var(--color-primary) / 80%) 40%,rgb(var(--color-primary) / 0%));    
 }
 span.wavybottom {
   height: 120px;
   width: 100%;
   clip-path: url(#design-system-wavybottom);
   background-color: var(--background-default-grey);
   display: block;
 }
 .full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
  }
</style>
<div class="bg-gradient full-width">
    <article>
        {{ value.content }}
    </article>
    <span class="wavybottom"></span>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 1200 120.2">
    <defs>
        <clipPath id="design-system-wavybottom" clipPathUnits="objectBoundingBox" transform="scale(0.0008333, 0.00832571666)">
            <path d="M0 82.8v37.4h1200V14.3c-67.8-23.1-144.3-15.5-214.3 3-79 20.8-161.9 61.8-241.8 78.6-82.3 17.3-168.1 16.3-250.5-.4-57.8-11.7-114-31.1-172-41.9C213.6 33.9 102.5 44 0 82.8z">
            </path> 
        </clipPath> 
    </defs>
</svg>