@layer components{.gradient-border-mask{position:relative}.gradient-border-mask:before{content:"";pointer-events:none;-webkit-mask-composite:destination-out;-webkit-mask-composite:xor;-webkit-mask-source-type:auto,auto;-webkit-mask-composite:xor;-webkit-mask-source-type:auto,auto;background-origin:border-box;background-image:linear-gradient(to bottom,var(--brand-primary)0%,var(--brand-primary)30%,transparent 100%);-webkit-mask-composite:xor;-webkit-mask-source-type:auto,auto;border:1px solid transparent;border-radius:8px;position:absolute;top:0;bottom:0;left:0;right:0;-webkit-mask-image:linear-gradient(#fff 0,#fff 0),linear-gradient(#fff 0,#fff 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:padding-box,border-box;-webkit-mask-origin:padding-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}@supports (color:color-mix(in lab, red, red)){.gradient-border-mask:before{background-image:linear-gradient(to bottom,color-mix(in srgb,var(--brand-primary)50%,transparent)0%,color-mix(in srgb,var(--brand-primary)50%,transparent)30%,transparent 100%)}}.gradient-border-top{position:relative}.gradient-border-top:before{content:"";pointer-events:none;-webkit-mask-composite:destination-out;-webkit-mask-composite:xor;-webkit-mask-source-type:auto,auto;-webkit-mask-composite:xor;-webkit-mask-source-type:auto,auto;-webkit-mask-composite:xor;-webkit-mask-source-type:auto,auto;background-image:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.5) 15%,rgba(255,255,255,.5) 85%,transparent 100%);background-origin:border-box;border-color:transparent;border-top-style:solid;border-top-width:1px;position:absolute;top:0;bottom:0;left:0;right:0;-webkit-mask-image:linear-gradient(#fff 0,#fff 0),linear-gradient(#fff 0,#fff 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:padding-box,border-box;-webkit-mask-origin:padding-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}@supports (color:color-mix(in lab, red, red)){.gradient-border-top:before{background-image:linear-gradient(to right,transparent 0%,color-mix(in srgb,var(--color-white)50%,transparent)15%,color-mix(in srgb,var(--color-white)50%,transparent)85%,transparent 100%)}}.gradient-border-bottom{position:relative}.gradient-border-bottom:before{content:"";pointer-events:none;-webkit-mask-composite:destination-out;-webkit-mask-composite:xor;-webkit-mask-source-type:auto,auto;-webkit-mask-composite:xor;-webkit-mask-source-type:auto,auto;-webkit-mask-composite:xor;-webkit-mask-source-type:auto,auto;background-image:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.1) 15%,rgba(255,255,255,.1) 85%,transparent 100%);background-origin:border-box;border-color:transparent;border-bottom-style:solid;border-bottom-width:1px;position:absolute;top:0;bottom:0;left:0;right:0;-webkit-mask-image:linear-gradient(#fff 0,#fff 0),linear-gradient(#fff 0,#fff 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:padding-box,border-box;-webkit-mask-origin:padding-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}@supports (color:color-mix(in lab, red, red)){.gradient-border-bottom:before{background-image:linear-gradient(to right,transparent 0%,color-mix(in srgb,var(--color-white)10%,transparent)15%,color-mix(in srgb,var(--color-white)10%,transparent)85%,transparent 100%)}}}