Announcement

import '@rhds/elements/rh-cta/rh-cta.js';
import '@rhds/elements/rh-announcement/rh-announcement.js';

<rh-announcement>
    <svg slot="image" width="80" height="48" role="img" aria-label="Sample image">
      <rect fill="light-dark(var(--rh-color-surface-dark, #383838), var(--rh-color-surface-light, #e0e0e0))" stroke="var(--rh-color-border-subtle)" stroke-width="2px" width="100%" height="100%" stroke-dasharray="4 4">
      </rect>
      <text x="17" y="30" style="font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace); font-size: var(--rh-font-size-body-text-md, 1rem);" fill="light-dark(var(--rh-color-text-primary-on-dark, #ffffff), var(--rh-color-text-primary-on-light, #151515))">
    Image
      </text>
    </svg>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit adipisicing elit adipisicing elit.</p>
  <rh-cta slot="cta" href="#">Learn More</rh-cta>
</rh-announcement>

<link rel="stylesheet" href="../rh-announcement-lightdom-shim.css">

import { Announcement } from "@rhds/elements/react/rh-announcement/rh-announcement.js";
import { Cta } from "@rhds/elements/react/rh-cta/rh-cta.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Announcement>
    <svg slot="image" width="80" height="48" role="img" aria-label="Sample image">
      <rect fill="light-dark(var(--rh-color-surface-dark, #383838), var(--rh-color-surface-light, #e0e0e0))" stroke="var(--rh-color-border-subtle)" stroke-width="2px" width="100%" height="100%" stroke-dasharray="4 4" />
      <text x="17" y="30" style="font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace); font-size: var(--rh-font-size-body-text-md, 1rem);" fill="light-dark(var(--rh-color-text-primary-on-dark, #ffffff), var(--rh-color-text-primary-on-light, #151515))">Image</text>
    </svg>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit adipisicing elit adipisicing elit.</p>
    <Cta slot="cta" href="#">Learn More</Cta>
  </Announcement>
  <link rel="stylesheet" href="../rh-announcement-lightdom-shim.css" />
);

rh-announcement {
  --rh-color-surface: #e0f0ff;

  @media (min-width: 768px) {
    --rh-color-surface: transparent;
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221012%22%20height%3D%2280%22%20fill%3D%22none%22%20viewBox%3D%220%200%201012%2080%22%3E%3Cpath%20fill%3D%22%23e0f0ff%22%20d%3D%22M0%200h1012v80H0z%22%2F%3E%3Cmask%20id%3D%22a%22%20width%3D%221012%22%20height%3D%2280%22%20x%3D%220%22%20y%3D%220%22%20maskUnits%3D%22userSpaceOnUse%22%20style%3D%22mask-type%3Aalpha%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M0%200h1012v80H0z%22%2F%3E%3C%2Fmask%3E%3Cg%20mask%3D%22url(%23a)%22%3E%3Cpath%20fill%3D%22%2392c5f9%22%20d%3D%22M142.5%2066.5h-13.1c-.2-.9-1-1.5-1.9-1.5h-6c-.9%200-1.7.6-1.9%201.5H67.5c-.2-1.3-1.2-2.2-2.4-2.4v-8.6h43.5c4.7%200%208.5-3.8%208.5-8.5s-3.8-8.5-8.5-8.5H89.5c-.3-2.5-2.4-4.5-4.9-4.5s-4.7%202-4.9%204.5H65v-17h34.6c.2.9%201%201.5%201.9%201.5h6c.9%200%201.7-.6%201.9-1.5h11.1c4.7%200%208.5-3.8%208.5-8.5s-3.8-8.5-8.5-8.5h-124C-8.2%204.5-12%208.3-12%2013v3.1c-2.4.2-4.2%202.1-4.4%204.4h-31.1c-4.1%200-7.5-3.4-7.5-7.5%200-4.7-3.8-8.5-8.5-8.5h-5V1c0-.6-.4-1-1-1h-8c-.6%200-1%20.4-1%201v3.5h-87c-4.7%200-8.5%203.8-8.5%208.5s3.8%208.5%208.5%208.5h17.1c.2%201.4%201.5%202.5%202.9%202.5s2.7-1.1%202.9-2.5h21.1c4.1%200%207.5%203.4%207.5%207.5v25.5h-21V47c0-4.7-3.8-8.5-8.5-8.5h-58c-4.7%200-8.5%203.8-8.5%208.5s3.8%208.5%208.5%208.5h33.1c.3%202.5%202.4%204.5%204.9%204.5s4.7-2%204.9-4.5h22.6v11h-74.5V63c0-.6-.4-1-1-1h-8c-.6%200-1%20.4-1%201v3.5h-5c-4.7%200-8.5%203.8-8.5%208.5%200%204.1-3.4%207.5-7.5%207.5H-277V75c0-4.7-3.8-8.5-8.5-8.5h-1.5V63c0-4.1%203.4-7.5%207.5-7.5h39.1c.2%201.4%201.5%202.5%202.9%202.5s2.7-1.1%202.9-2.5h11.1c4.7%200%208.5-3.8%208.5-8.5s-3.8-8.5-8.5-8.5h-79.1c-.2-.9-1-1.5-1.9-1.5h-6c-.9%200-1.7.6-1.9%201.5h-13.1c-4.7%200-8.5%203.8-8.5%208.5%200%204.1-3.4%207.5-7.5%207.5H-361V29c0-4.7-3.8-8.5-8.5-8.5h-15.1c-.2-1.4-1.4-2.5-2.9-2.5s-2.7%201.1-2.9%202.5h-51.1c-4.1%200-7.5-3.4-7.5-7.5s3.4-7.5%207.5-7.5h15.1c.2.9%201%201.5%201.9%201.5h6c.9%200%201.7-.6%201.9-1.5h50.1V9c0%20.6.4%201%201%201h8c.6%200%201-.4%201-1V5.5h51c4.1%200%207.5%203.4%207.5%207.5%200%204.7%203.8%208.5%208.5%208.5h9.1c.3%202.5%202.4%204.5%204.9%204.5s4.7-2%204.9-4.5h83.1c4.7%200%208.5-3.8%208.5-8.5s-3.8-8.5-8.5-8.5h-80c-4.7%200-8.5%203.8-8.5%208.5v3.1c-2.4.2-4.2%202.1-4.4%204.4h-9.1c-4.1%200-7.5-3.4-7.5-7.5%200-4.7-3.8-8.5-8.5-8.5h-51V1c0-.6-.4-1-1-1h-8c-.6%200-1%20.4-1%201v3.5h-50.1c-.2-.9-1-1.5-1.9-1.5h-6c-.9%200-1.7.6-1.9%201.5h-15.1c-4.7%200-8.5%203.8-8.5%208.5s3.8%208.5%208.5%208.5h51.1c.2%201.3%201.2%202.2%202.4%202.4v14.6h-67.5c-4.7%200-8.5%203.8-8.5%208.5s3.8%208.5%208.5%208.5h43.1c.3%202.5%202.4%204.5%204.9%204.5s4.7-2%204.9-4.5h24.6V91c0%204.1-3.4%207.5-7.5%207.5h-33.1c-.2-1.4-1.4-2.5-2.9-2.5s-2.7%201.1-2.9%202.5h-37.1c-4.7%200-8.5%203.8-8.5%208.5s3.8%208.5%208.5%208.5h71.1c.2%201.3%201.2%202.2%202.4%202.4v6.6h-14.6c-.3-2.5-2.4-4.5-4.9-4.5s-4.7%202-4.9%204.5h-29.1c-4.7%200-8.5%203.8-8.5%208.5s3.8%208.5%208.5%208.5h56c4.7%200%208.5-3.8%208.5-8.5v-17.5h20.5v3.5c0%20.6.4%201%201%201h8c.6%200%201-.4%201-1v-3.5h7c4.7%200%208.5-3.8%208.5-8.5%200-4.1%203.4-7.5%207.5-7.5h35.5v7.5c0%204.7%203.8%208.5%208.5%208.5h1.5v3.5c0%204.1-3.4%207.5-7.5%207.5h-25.1c-.2-1.4-1.5-2.5-2.9-2.5s-2.7%201.1-2.9%202.5h-27.1c-4.7%200-8.5%203.8-8.5%208.5s3.8%208.5%208.5%208.5h29.5v10.6c-2.4.2-4.2%202.1-4.4%204.4h-61.1c-4.7%200-8.5%203.8-8.5%208.5s3.8%208.5%208.5%208.5h58c4.7%200%208.5-3.8%208.5-8.5v-3.1c2.4-.2%204.2-2.1%204.4-4.4h14.1c.2.9%201%201.5%201.9%201.5h6c.9%200%201.7-.6%201.9-1.5h7.1c4.1%200%207.5%203.4%207.5%207.5%200%204.7%203.8%208.5%208.5%208.5h21v3.5c0%20.6.4%201%201%201h8c.6%200%201-.4%201-1v-3.5h71c4.7%200%208.5-3.8%208.5-8.5s-3.8-8.5-8.5-8.5h-29.1c-.2-1.4-1.5-2.5-2.9-2.5s-2.7%201.1-2.9%202.5h-19.1c-4.1%200-7.5-3.4-7.5-7.5v-19h3.5c.6%200%201-.4%201-1v-3.5h28.6v7.5c0%204.7%203.8%208.5%208.5%208.5h58c4.7%200%208.5-3.8%208.5-8.5s-3.8-8.5-8.5-8.5h-33.1c-.3-2.5-2.4-4.5-4.9-4.5s-4.7%202-4.9%204.5H-187v-11h74.5v3.5c0%20.6.4%201%201%201h8c.6%200%201-.4%201-1v-3.5h5c4.7%200%208.5-3.8%208.5-8.5%200-4.1%203.4-7.5%207.5-7.5H-46v7.5c0%204.7%203.8%208.5%208.5%208.5h1.5v3.5c0%204.1-3.4%207.5-7.5%207.5h-39.1c-.2-1.4-1.5-2.5-2.9-2.5s-2.7%201.1-2.9%202.5h-11.1c-4.7%200-8.5%203.8-8.5%208.5s3.8%208.5%208.5%208.5H-70v15h-24.6c-.3-2.5-2.4-4.5-4.9-4.5s-4.7%202-4.9%204.5h-31.1c-4.7%200-8.5%203.8-8.5%208.5s3.8%208.5%208.5%208.5h58c4.7%200%208.5-3.8%208.5-8.5v-7.5h18.6c.2.9%201%201.5%201.9%201.5h6c.9%200%201.7-.6%201.9-1.5h7.1c4.1%200%207.5%203.4%207.5%207.5%200%204.7%203.8%208.5%208.5%208.5h33v3.5c0%20.6.4%201%201%201h8c.6%200%201-.4%201-1v-3.5h26.1c.2%201.4%201.5%202.5%202.9%202.5s2.7-1.1%202.9-2.5h27.1c4.7%200%208.5-3.8%208.5-8.5s-3.8-8.5-8.5-8.5H67.4c-.2-1.4-1.5-2.5-2.9-2.5s-2.7%201.1-2.9%202.5H28.5c-4.1%200-7.5-3.4-7.5-7.5v-19h3.5c.6%200%201-.4%201-1v-3.5H50v7.5c0%204.7%203.8%208.5%208.5%208.5h62c4.7%200%208.5-3.8%208.5-8.5s-3.8-8.5-8.5-8.5H93.4c-.3-2.5-2.4-4.5-4.9-4.5s-4.7%202-4.9%204.5H51v-11h25.5c4.7%200%208.5-3.8%208.5-8.5s-3.8-8.5-8.5-8.5H51V91c0-4.1%203.4-7.5%207.5-7.5h39.1c.2%201.4%201.5%202.5%202.9%202.5s2.7-1.1%202.9-2.5h39.1c4.7%200%208.5-3.8%208.5-8.5s-3.8-8.5-8.5-8.5m-410-61h80c4.1%200%207.5%203.4%207.5%207.5s-3.4%207.5-7.5%207.5h-83.1c-.2-2.4-2.1-4.2-4.4-4.4V13c0-4.1%203.4-7.5%207.5-7.5M-70%20167c0%204.1-3.4%207.5-7.5%207.5h-58c-4.1%200-7.5-3.4-7.5-7.5s3.4-7.5%207.5-7.5h31.1c.3%202.5%202.4%204.5%204.9%204.5s4.7-2%204.9-4.5H-70zM64%2064.1c-1.3.2-2.2%201.2-2.4%202.4H41.5V63c0-.6-.4-1-1-1h-8c-.6%200-1%20.4-1%201v3.5h-15C11.8%2066.5%208%2070.3%208%2075c0%204.1-3.4%207.5-7.5%207.5H-35V75c0-4.7-3.8-8.5-8.5-8.5H-45V63c0-4.1%203.4-7.5%207.5-7.5H1.6c.2%201.4%201.5%202.5%202.9%202.5s2.7-1.1%202.9-2.5h15.1c4.7%200%208.5-3.8%208.5-8.5s-3.8-8.5-8.5-8.5H-11V25.9c2.4-.2%204.2-2.1%204.4-4.4H54V47c0%204.7%203.8%208.5%208.5%208.5H64zM-45%2083.5h9v15h-9zm9-1h-9v-15h1.5c4.1%200%207.5%203.4%207.5%207.5zm-22.6%200C-58.9%2080-61%2078-63.5%2078s-4.7%202-4.9%204.5h-33.1c-4.1%200-7.5-3.4-7.5-7.5%200-3.1%201.9-5.8%204.7-7%20.4%201.1%201.5%202%202.8%202%201.5%200%202.7-1.1%202.9-2.5H-46v15zm66-28C7.2%2053.1%205.9%2052%204.5%2052s-2.7%201.1-2.9%202.5H-11v-15h33.5c4.1%200%207.5%203.4%207.5%207.5s-3.4%207.5-7.5%207.5zm47.6-15h9v15h-1.5c-4.1%200-7.5-3.4-7.5-7.5zm24.6%200C79.9%2042%2082%2044%2084.5%2044s4.7-2%204.9-4.5h19.1c4.1%200%207.5%203.4%207.5%207.5s-3.4%207.5-7.5%207.5H65v-15zm-15.6-1h-9v-17h9zM128%2013c0%204.1-3.4%207.5-7.5%207.5h-11.1c-.2-.9-1-1.5-1.9-1.5h-6c-.9%200-1.7.6-1.9%201.5H55v-15h65.5c4.1%200%207.5%203.4%207.5%207.5M-3.5%205.5H54v15H-6.6c-.2-2.4-2.1-4.2-4.4-4.4V13c0-4.1%203.4-7.5%207.5-7.5m-118%2015h-21.1c-.2-1.4-1.5-2.5-2.9-2.5s-2.7%201.1-2.9%202.5h-17.1c-4.1%200-7.5-3.4-7.5-7.5s3.4-7.5%207.5-7.5h87V9c0%20.6.4%201%201%201h8c.6%200%201-.4%201-1V5.5h5c4.1%200%207.5%203.4%207.5%207.5%200%204.7%203.8%208.5%208.5%208.5h31.1c.2%202.4%202.1%204.2%204.4%204.4v12.6h-46.6c-.2-.9-1-1.5-1.9-1.5h-6c-.9%200-1.7.6-1.9%201.5h-15.1c-4.7%200-8.5%203.8-8.5%208.5%200%204.1-3.4%207.5-7.5%207.5H-113V29c0-4.7-3.8-8.5-8.5-8.5m-37.1%2034c-.3-2.5-2.4-4.5-4.9-4.5s-4.7%202-4.9%204.5h-33.1c-4.1%200-7.5-3.4-7.5-7.5s3.4-7.5%207.5-7.5h58c4.1%200%207.5%203.4%207.5%207.5v7.5zm-126.9%2013c4.1%200%207.5%203.4%207.5%207.5v7.5h-9v-15zm-1.5%2016h9v15h-9zm-15.6-1c-.3-2.5-2.4-4.5-4.9-4.5s-4.7%202-4.9%204.5h-31.1c-4.1%200-7.5-3.4-7.5-7.5%200-3.1%201.9-5.8%204.7-7%20.4%201.1%201.5%202%202.8%202%201.5%200%202.7-1.1%202.9-2.5h52.6v15zM-387%2023.9c1.3-.2%202.2-1.2%202.4-2.4h15.1c4.1%200%207.5%203.4%207.5%207.5v25.5h-15V47c0-4.7-3.8-8.5-8.5-8.5h-1.5zM-463%2047c0-4.1%203.4-7.5%207.5-7.5h67.5v15h-14.6c-.2-2.5-2.3-4.5-4.9-4.5s-4.7%202-4.9%204.5h-43.1c-4.1%200-7.5-3.4-7.5-7.5m76%207.5v-15h1.5c4.1%200%207.5%203.4%207.5%207.5v7.5zm-62%2078.5c0-4.1%203.4-7.5%207.5-7.5h29.1c.3%202.5%202.4%204.5%204.9%204.5s4.7-2%204.9-4.5h14.6v15h-53.5c-4.1%200-7.5-3.4-7.5-7.5m71%200c0%204.1-3.4%207.5-7.5%207.5h-1.5v-15h9zm0-8.5h-9v-6.6c1.3-.2%202.2-1.2%202.4-2.4h6.6zm54.5-26c-4.7%200-8.5%203.8-8.5%208.5%200%204.1-3.4%207.5-7.5%207.5h-7V111c0-.6-.4-1-1-1h-8c-.6%200-1%20.4-1%201v3.5h-28.1c-.2-1.4-1.5-2.5-2.9-2.5s-2.7%201.1-2.9%202.5h-71.1c-4.1%200-7.5-3.4-7.5-7.5s3.4-7.5%207.5-7.5h37.1c.2%201.4%201.5%202.5%202.9%202.5s2.7-1.1%202.9-2.5h33.1c4.7%200%208.5-3.8%208.5-8.5V55.5h35.5c4.7%200%208.5-3.8%208.5-8.5%200-4.1%203.4-7.5%207.5-7.5h13.1c.2.9%201%201.5%201.9%201.5h6c.9%200%201.7-.6%201.9-1.5h79.1c4.1%200%207.5%203.4%207.5%207.5s-3.4%207.5-7.5%207.5h-11.1c-.2-1.4-1.5-2.5-2.9-2.5s-2.7%201.1-2.9%202.5h-39.1c-4.7%200-8.5%203.8-8.5%208.5v3.5h-52.6c-.2-1.4-1.5-2.5-2.9-2.5-1.7%200-3%201.3-3%203v.1c-3.2%201.2-5.5%204.3-5.5%207.9%200%204.7%203.8%208.5%208.5%208.5h31.1c.3%202.5%202.4%204.5%204.9%204.5s4.7-2%204.9-4.5h14.6v15zm44%2016c-4.1%200-7.5-3.4-7.5-7.5v-7.5h9v15zm15.1-15c.3%202.5%202.4%204.5%204.9%204.5s4.7-2%204.9-4.5h33.1c4.1%200%207.5%203.4%207.5%207.5s-3.4%207.5-7.5%207.5h-13.1c-.2-.9-1-1.5-1.9-1.5h-6c-.9%200-1.7.6-1.9%201.5H-277v-15zM-277%20119v-3.5h32.6c.2.9%201%201.5%201.9%201.5h6c.9%200%201.7-.6%201.9-1.5h12.6v6.5h-3.5c-.6%200-1%20.4-1%201v4.1c-3.2%201.2-5.5%204.3-5.5%207.9%200%204.1-3.4%207.5-7.5%207.5h-9.1c-.2-.9-1-1.5-1.9-1.5h-6c-.9%200-1.7.6-1.9%201.5H-313v-12.6c1.3-.2%202.2-1.2%202.4-2.4h25.1c4.7%200%208.5-3.8%208.5-8.5m-66.5%2023.5c-4.1%200-7.5-3.4-7.5-7.5s3.4-7.5%207.5-7.5h27.1c.2%201.3%201.2%202.2%202.4%202.4v12.6zm22%2032h-58c-4.1%200-7.5-3.4-7.5-7.5s3.4-7.5%207.5-7.5h61.1c.2%202.4%202.1%204.2%204.4%204.4v3.1c0%204.1-3.4%207.5-7.5%207.5m108-15h19.1c.2%201.4%201.5%202.5%202.9%202.5s2.7-1.1%202.9-2.5h29.1c4.1%200%207.5%203.4%207.5%207.5s-3.4%207.5-7.5%207.5h-71V171c0-.6-.4-1-1-1h-8c-.6%200-1%20.4-1%201v3.5h-21c-4.1%200-7.5-3.4-7.5-7.5%200-4.7-3.8-8.5-8.5-8.5h-7.1c-.2-.9-1-1.5-1.9-1.5h-6c-.9%200-1.7.6-1.9%201.5h-14.1c-.2-2.4-2.1-4.2-4.4-4.4v-10.6h54.6c.2.9%201%201.5%201.9%201.5h6c.9%200%201.7-.6%201.9-1.5h9.1c4.7%200%208.5-3.8%208.5-8.5%200-3.1%201.9-5.7%204.5-6.9v2.9c0%20.6.4%201%201%201h3.5v19c-.1%204.7%203.7%208.5%208.4%208.5m49.1-32c.3%202.5%202.4%204.5%204.9%204.5s4.7-2%204.9-4.5h33.1c4.1%200%207.5%203.4%207.5%207.5s-3.4%207.5-7.5%207.5h-58c-4.1%200-7.5-3.4-7.5-7.5v-7.5zm-23.6-1h-28.5V123c0-.6-.4-1-1-1h-3.5v-6.5c4.5-.3%208-4%208-8.5%200-4.7-3.8-8.5-8.5-8.5h-33.1c-.3-2.5-2.4-4.5-4.9-4.5s-4.7%202-4.9%204.5H-277v-15h35.5c4.7%200%208.5-3.8%208.5-8.5%200-4.1%203.4-7.5%207.5-7.5h5V71c0%20.6.4%201%201%201h8c.6%200%201-.4%201-1v-3.5h74.5v15h-6.6c-.2-1.4-1.5-2.5-2.9-2.5s-2.7%201.1-2.9%202.5h-31.1c-4.7%200-8.5%203.8-8.5%208.5v7.5h-11.5c-4.7%200-8.5%203.8-8.5%208.5s3.8%208.5%208.5%208.5h11.5zm53-59h11.5c4.1%200%207.5%203.4%207.5%207.5s-3.4%207.5-7.5%207.5H-135zm-39.6%2031c-.2-1.4-1.5-2.5-2.9-2.5s-2.7%201.1-2.9%202.5h-6.6V91c0-4.1%203.4-7.5%207.5-7.5h31.1c.2%201.4%201.5%202.5%202.9%202.5s2.7-1.1%202.9-2.5h6.6V91c0%204.1-3.4%207.5-7.5%207.5zm-13.4%201v15h-11.5c-4.1%200-7.5-3.4-7.5-7.5s3.4-7.5%207.5-7.5zm106.5-1c-4.7%200-8.5%203.8-8.5%208.5%200%204.1-3.4%207.5-7.5%207.5h-5V111c0-.6-.4-1-1-1h-8c-.6%200-1%20.4-1%201v3.5H-187v-15h6.6c.2%201.4%201.5%202.5%202.9%202.5s2.7-1.1%202.9-2.5h31.1c4.7%200%208.5-3.8%208.5-8.5v-7.5h11.5c4.7%200%208.5-3.8%208.5-8.5s-3.8-8.5-8.5-8.5H-135v-11h35.5c4.7%200%208.5-3.8%208.5-8.5%200-4.1%203.4-7.5%207.5-7.5h15.1c.2.9%201%201.5%201.9%201.5h6c.9%200%201.7-.6%201.9-1.5H-12v15h-25.5c-4.7%200-8.5%203.8-8.5%208.5v3.5h-52.6c-.2-1.4-1.5-2.5-2.9-2.5-1.7%200-3%201.3-3%203v.1c-3.2%201.2-5.5%204.3-5.5%207.9%200%204.7%203.8%208.5%208.5%208.5h33.1c.3%202.5%202.4%204.5%204.9%204.5s4.7-2%204.9-4.5H-46v15zm44%2016c-4.1%200-7.5-3.4-7.5-7.5v-7.5h9v15zm53.1-15c.3%202.5%202.4%204.5%204.9%204.5s4.7-2%204.9-4.5H50v15H-4.6c-.2-.9-1-1.5-1.9-1.5h-6c-.9%200-1.7.6-1.9%201.5H-35v-15zm-115.1%2043c-4.1%200-7.5-3.4-7.5-7.5s3.4-7.5%207.5-7.5h11.1c.2%201.4%201.5%202.5%202.9%202.5s2.7-1.1%202.9-2.5H-70v15zm128%2017h33.1c.2%201.4%201.5%202.5%202.9%202.5s2.7-1.1%202.9-2.5h17.1c4.1%200%207.5%203.4%207.5%207.5s-3.4%207.5-7.5%207.5H57.4c-.2-1.4-1.5-2.5-2.9-2.5s-2.7%201.1-2.9%202.5H25.5V171c0-.6-.4-1-1-1h-8c-.6%200-1%20.4-1%201v3.5h-33c-4.1%200-7.5-3.4-7.5-7.5%200-4.7-3.8-8.5-8.5-8.5h-7.1c-.2-.9-1-1.5-1.9-1.5h-6c-.9%200-1.7.6-1.9%201.5H-69v-15h54.6c.2.9%201%201.5%201.9%201.5h6c.9%200%201.7-.6%201.9-1.5h7.1c4.7%200%208.5-3.8%208.5-8.5%200-3.1%201.9-5.7%204.5-6.9v2.9c0%20.6.4%201%201%201H20v19c0%204.7%203.8%208.5%208.5%208.5m55.1-32c.3%202.5%202.4%204.5%204.9%204.5s4.7-2%204.9-4.5h27.1c4.1%200%207.5%203.4%207.5%207.5s-3.4%207.5-7.5%207.5h-62c-4.1%200-7.5-3.4-7.5-7.5v-7.5zm-33.6-1H25.5V123c0-.6-.4-1-1-1h-8c-.6%200-1%20.4-1%201v4.1c-3.2%201.2-5.5%204.3-5.5%207.9%200%204.1-3.4%207.5-7.5%207.5h-7.1c-.2-.9-1-1.5-1.9-1.5h-6c-.9%200-1.7.6-1.9%201.5H-69v-15h25.5c4.7%200%208.5-3.8%208.5-8.5v-3.5h20.6c.2.9%201%201.5%201.9%201.5h6c.9%200%201.7-.6%201.9-1.5H50zm26.5-27c4.1%200%207.5%203.4%207.5%207.5s-3.4%207.5-7.5%207.5H51v-15zm66-17h-39.1c-.2-1.4-1.5-2.5-2.9-2.5s-2.7%201.1-2.9%202.5H58.5c-4.7%200-8.5%203.8-8.5%208.5v7.5H25.4C25.1%2096%2023%2094%2020.5%2094s-4.7%202-4.9%204.5H-35v-15H.5C5.2%2083.5%209%2079.7%209%2075c0-4.1%203.4-7.5%207.5-7.5h15V71c0%20.6.4%201%201%201h8c.6%200%201-.4%201-1v-3.5h20.1c.2%201.4%201.5%202.5%202.9%202.5s2.7-1.1%202.9-2.5h52.1c.2.9%201%201.5%201.9%201.5h6c.9%200%201.7-.6%201.9-1.5h13.1c4.1%200%207.5%203.4%207.5%207.5s-3.3%207.5-7.4%207.5%22%2F%3E%3Cpath%20fill%3D%22url(%23b)%22%20d%3D%22M10%2010h160v160H10z%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3Cpattern%20id%3D%22b%22%20width%3D%221%22%20height%3D%221%22%20patternContentUnits%3D%22objectBoundingBox%22%3E%3Cuse%20xlink%3Ahref%3D%22%23c%22%20transform%3D%22scale(.00156)%22%2F%3E%3C%2Fpattern%3E%3Cimage%20xlink%3Ahref%3D%22data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAAoAAAAKACAYAAAAMzckjAAAACXBIWXMAACxLAAAsSwGlPZapAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAD%2BdSURBVHgB7d1%2FrN3lfeD5z7UxxE6wDQY2mUBy%2B4P%2BCG1CZjeBZGY3RrOjNCSzQ5tCd1dZhbRJd9VKTWgmo0q7EtDdf7azCWSljDRNWoi2UjekaVK1YZrurHwjzeQHdAaaYJqWll7ADAzY2AbbF2xf3%2Fk%2B555jjq%2Fvj3POPed8n%2Bf7fb0kj40hP6ZJmnc%2Fz%2Ff5PBG00uGIa1%2BI2Ff9PBsAADRbFX0fruLvcPVjqfrxdyIQAKDBqti7qxt%2B%2FT9EIAC0yEzQClXg7V6K%2BGr1y71r%2FCXz1b8Zbrik%2BjkAgEYTgC2QpntV%2FO2Ljad8IhAAWmBL0GgHI26q4u%2BhGOyItxOKjoMBoNkEYINVIXf7luVj391D%2FM1EIAA0nCPghkqXPaqQ%2B0SMznEwADSUAGyYAS57DEMEAkADCcAGGeKyxzBEIAA0jG8AGyK97DGB%2BEt8EwgADSMAGyC97DGh%2BOsRgQDQII6AC1dF2cerOLs7psNxMAA0gAlgwdKalynGX2ISCAANYAJYqDGsedkMk0AAKJgALMzh5aXOKf5ujXqJQAAolAAsSHfHX7rscW3kQQQCQIEEYCEmtONvHEQgABTGJZACZBx%2FSeef28L%2Fsns2AIAimABmLvP469jy97bGrj%2B%2BbD62zNww8%2FZn5wMAyJoJYMZKiL9k%2By%2B%2FNmKp%2Bud4Zmnf0kOvnw0AIGsCMFOlxF%2Ba%2Fl34ge3LfyACAaAIAjBD3Xd9H4oCFi6%2F9vad5%2F6GCASA7AnAzHTjL03%2BdkfmLvgvL%2Bz8OI8IBICsCcCMlBR%2FSefbv7WIQADIlgDMRGnxt%2Bb0r58IBIAsWQOTgdLiL9n1x5fFljdsHewvngkrYgAgIyaANSsx%2Fi78J9sHj7%2FEJBAAsiIAa9Rd9fLVKCj%2Bkos%2B8JoYmggEgGwIwJqUsudvpYG%2B%2FVuLCASALAjAGpQaf8m6N38HIQIBoHYCcMpKjr9NTf%2F6iUAAqJUAnKKS4y%2FZ9PSvnwgEgNoIwCmp4m9398LHbBQovfk7lulfPxEIALUQgFPSnfxdG4Ua6%2FSvnwgEgKkTgFNQTf%2FuiYLjL03%2FLvzA9pgYEQgAUyUAJ6yKv9ur6d%2BtUbCJTf%2F6iUAAmBoBOEHd%2BLsjCjbx6V8%2FEQgAUyEAJ6SKv4%2BXHn%2FJhaO8%2BrEZIhAAJk4ATsDBiJuq%2BLs7GuCifzKl6V8%2FEQgAEyUAxyzt%2BtuyfOmjeBdW8bflDVujFiIQACZGAI5R36Ln3dEAU7n8sR4RCAATIQDHpLvoudhXPlbatvei%2BqZ%2F%2FUQgAIydAByTpeVj39loiNf8DzsiGyIQAMZKAI5BWvdS%2FXRTNMREnn3bLBEIAGMjADepxF1%2F%2F%2FJDd8WXb%2Fzkmn%2B%2B9m%2F%2F1iICAWAsLghGVsXf3hLjb9%2F1t5z945vv%2F%2FQ5f37m4pnY9p4p7%2F4bxqsReMPM25%2BdDwBgaCaAI%2Bre%2BC1q3cvK%2BLvvxl8%2FbxK4be9rOhGYNZNAANgUATiCEm%2F8roy%2FnpURmO3x70oiEABGJgBHUNqN37Xir6cXgeniRxarXwYlAgFgJJmf9eWntEsfG8Vfv1%2Fb8q%2Fiv3vnv4rizMR8bJnxTSAADMgEcAjdN37viEIME387LtwST7ztf41vP%2FVrURyTQAAYigAcUGlv%2FN77wTsHjr%2Fkstct7%2F378yv%2BmQgEgIYTgAPou%2FRRxBu%2F6Xu%2Br9%2Fw0aH%2BNj%2F%2Bhldf%2FkgR%2BN3F26I4IhAABiIAB3Am4q4o5NJHir90qWMYl71uW%2BcIuN8Dp28TgQDQUAJwA%2BnSx0zErVGAUeIvuWrPRav%2BvggEgGYSgOuo4u%2FaUi59fP2Gj40Uf9u2zsSbLl375Q8RCADNIwDX0H3p46tRgLnrb4l7P3hHjOINuy7a8K8RgQDQLAJwDUuFfPc3f%2BU18bkP3RWjetOejQMwEYEA0BwCcBXpu7%2Fqp5sic8%2FvuSru%2BLU%2FiFGlix97Xrdt4L9eBAJAMwjAFUr57i%2FF3%2B1V%2FB3fsTNG1b%2F6ZVAiEADKJwD7lPLdX4q%2BFH%2FP77kyNqO3%2FHlYIhAAyiYA%2B5xZPvqdjczdMZb4O3%2F33zBEIACUSwB2VdO%2Fj5ew7y898ZYufmzWVQNe%2FliPCASAMgnAOHv0e0dkbpQn3laz0e6%2FYYhAACiPAIzOypfs3%2FkdddHzagbZ%2FTcMEQgAZWl9AB4u4Lu%2FdOT75feNJ%2F6SN%2B0ZbwAmIhAAytHqAKzib2%2FuR79p3ctvfex3N7Xupd%2Bwu%2F%2BGIQIBoAytDcDud3%2F3RMbGte6l36irXwYlAgEgf60NwBJWvnz5fZ8ca%2Fwlkzj%2BXUkEAkDeWhmAByNuzX3ly7hu%2FPab5PHvSiIQAPLVugBMR79blqd%2F2Xrwbe8d243ffm%2FYNdnj35VEIADkqXUBmPvRb7r0cc%2FP%2FWZMwlV7xrP7bxgiEADy06oAzP3odxKXPnrS8e%2Bu7RdEHUQgAOSlNQFYwtHvJC599Ez7%2BHclEQgA%2BWhNAOZ%2B9DuJSx%2F96jj%2BXUkEAkAeWhGAuR%2F9pu%2F%2BJnHpo6fO49%2BVRCAA1K%2FxAZj70W%2BKv%2FTd3yTVffy7kggEgHo1PgBzP%2Fq954N3Tuy7v5437J788udhiUAAqE%2BjAzC99Zvz0W%2F67u%2FBt743Jmmay5%2BHJQIBoB6NDsCc3%2Fqd9Hd%2FPZN%2B%2B3ezRCAATF9jA%2FBwxke%2F0%2Fjur2cab%2F9ulggEgOlqZACmix%2FV9O%2BOyFSa%2FE36u79k29aZbI9%2FVxKBADA9jQzAKv6%2BGpn6%2Bg0fi7nrbolpuKyQ%2BOsRgQAwHY0LwIPLlz6ujQylo98vv2%2Fy3%2F31vH533t%2F%2FrUYEAsDkNSoAc9%2F5l777S%2B%2F9TkvuF0DWIgIBYLIaFYA57%2FxLK1%2Bm8d1fTzr%2BTStgSiUCAWByGhOAafqX686%2Faa186Vfa93%2BrEYEAMBmNCcCliH2RoXTkO62VL%2F0uu7j8AExEIACMXyMCsHvxYzYy9OX3TffoN8n59Y9RiEAAGK%2FiAzDnix%2F7r353fP2Gj8a0lXr5Yz0iEADGpwkTwA9HhtO%2FdPT7uQ%2FdFXXYc%2FEF0UQiEADGo%2BgAzPnFjzqOfnuaOAHsEYEAsHlFB%2BAZR7%2Fn2bV9a9HrXwYhAgFgc4othWr6tzfHtS91Hv0mTVj%2FMggRCACjKzYAq6PfeyJDdR79Jm%2FYfVG0hQgEgNEUGYC5rn1JC5%2FrOvrt2VkdAbeJCASA4RUZgLmufalj4XO%2FdPy7bWuzv%2F9bjQgEgOEUVwuHM33vd9pv%2Fa6mLd%2F%2FrUYEAsDgigrA7tqXWyMzdbz1u5qmPP82KhEIAIMpKgDPZDr9u%2BeDd0YOmvT826hEIABsrJgATNO%2FHNe%2BzF1%2FSzz41vdG3dp8%2FLuSCASA9RUTgDkufe4c%2Fb7vk5EDAXguEQgAaysiAHOd%2Fn1970drv%2FjR0%2Fbv%2F1YjAgFgdUUEYK7Tv7p3%2FvVr2%2F6%2FQYlAADhf9gGY6%2FTvtz72O5GLtu7%2FG1SKwIeOfiSKIwIBmJDsqyHHJ9%2FSxY%2F5K6%2BJXOwy%2FdvQv33NnfHIgZ%2BL4ohAACYg6wCspn97Y%2FlHVnK5%2BNGzx%2Fd%2FA9l3%2Bd0iEAAi8wBcyvDbvxxe%2FFhp13YBOCgRCAAZB2CO079cXvzol45%2Fd1zo%2B79hiEAA2i7bcshx%2Bpdb%2FCU7LvT93yhEIABtlmUA5jr9m7vulsiNBdCjE4EAtFWWAZjj9C%2BntS%2F9du24IBidCASgjbILwBynf7mtfem3xwRw00QgAG2TXQCeifhwZCa3tS89jn%2FHRwQC0CZZBWCOr36k6V9ua196LIAer%2FIjcHZ3AMAAsgrA3N787ax9yXT6l1gAPX5FR%2BDigggEYCDZBGCW07%2Fr8p3%2BJVbATEaxERhxrQgEYBDZBGCO0799Ga596dm2daY6AnYDeFJEIABNlkUA5jj9S0ufc57%2Bib%2FJE4EANFUWAZjj9C%2FHpc%2F9XACZDhEIQBPVHoDV9G%2F3TGZ7%2F3J88m2lnRZAT40IBKBpag%2FAxYibqp9mIxMlTP8SR8DTJQIBaJLaA3BLZse%2FJUz%2FEgE4fSIQgKaoNQAPLl%2F8mI1MlDP98%2F1fXUQgAE1QawBuyezZt1Kmf%2Fb%2F1UsEAlC62gLw8PLFj72RiVKmf4k3gOsnAgEoWW0BeMb0b2S73ADOgggEoFS1BGBui59Lmv4l2x0BZ0MEAlCiuiaAH4%2BMlDT9S0%2FA7bgwmxf8CBEIQHlqKYml5d1%2FWSht%2Bmf9S55EIAAlmXoA5rb6paT4S9wAzpcIBKAUUw%2FAnFa%2FHN%2B%2BM%2FYVFoB2AOZNBAJQgqkG4OHlyd%2FeyMSDb%2FuZ6gj4yiiJG8D5E4EA5G6qAXgmt2ff3vfJKM0FW2eC%2FIlAAHI2tQCspn%2B7ZzK6%2FDF3%2FS3FTf8Sl0DKIQIByNXUAnBxOf6y%2BS%2BUEqd%2Fvv8rjwgEIEdTC8AtGe3%2B23%2F1u4uc%2FrkBXCYRCEBuphKAh9N%2FkSz%2FyMLXb%2FilKJEF0OUSgQDkZCpFcSaj6V9a%2FPzgW38mSmQCWDYRCEAuphKAMxmtfinp2beVrIApnwgEIAcTD8CcXv4oefqXbDcBbAQRCEDdJh6AOb38sf%2Fqd3Ve%2FyiVbwCbQwQCUKeJFkVuL3%2BUuPqlxwqY5hGBANRlogF4JqPFz6WufunZttX0r4lEIAB1mGhVzGR0%2B3fu%2BpujZCaAzSUCAZi2iQXg4eWj39nIQLr8MXfdLVEyE8BmE4EATNPEquJMRpc%2F9hUef8nOHSaATScCAZiWiQVgTrv%2FSp%2F%2BJReaALaCCARgGiZSFQeXL3%2FMRgYeeOt7i7780WMHYHuIQAAmbSIBWE3%2F%2FmlkYu768qd%2FiR2A7SICAZiksVfF4YjdM8uvf9Su9Jc%2FesRfO4lAACZl7GWxmNHuvwcaEH%2FJDse%2FrSUCAZiEsQfgloyOf7%2B%2B96PRBNu2zgTtJQIBGLexBmD36bcsJoClv%2FzRzxEwIhCAcRprWSzmtPql8Jc%2F%2BlkCTSICARiXsZbFlkyWPx%2FfvrMRlz96TADpEYEAjMPYyqJ7%2FLs3MvDg236mE4FNseMil0B4lQgEYLPGFoBZHf824OUPWE%2BKwEeP%2FnwUSAQCZGBsAZjL7d%2B0%2B2%2F%2F1e%2BKJvEKCKv5%2F1%2FzmfjLxSK%2FdRWBADUbSwCm5c%2BRze3fZsVf4htA1vJvTn9aBAIwtLGURU7Ln7%2B%2B95eiSewAZCMiEIBhjSUAczr%2Bnb%2Fyp6JJBCCDEIEADGNcZ4t7IwN%2F0pCXP%2Fp5Bo5BiUAABrXpADy8HH9Z%2FC%2FuJu3%2Bg1GIQAAGsekAPJPJ8uf5K69pzNNv%2FUwAGZYIBGAjmw7AmUyOf%2Fc1dPffNv3HCFIEPvuDH4sCiUCAKdhUAB5O%2F8t6%2BQWQ2jX1%2BNc7wIzqjy7%2FAxEIwKo2VRdnMpn%2BNfX4N3ELmFGdfN1uEQjAqjYVgDOZrH9p6vFvIgDZDBEIwGpGDsDDy0e%2FeyMDj159fTTVjot8BMjmiEAAVho5ABczib8mLn%2BGcWtCBAYAYzNyAFYHk%2B%2BJDDzQ8N1%2FFzgCZkxKj8Clf3%2FFPQHAWGwmAPdGBh5863ujydwCZpyKjsClmVtFIMB4jFQX3dc%2FZqNm6fh3%2F9XvCmBwIhCAkQLwzPL%2Bv9q1If52XGgCyPiJQIB2G6kucln%2F8kDDj39hkkQgQHsNHYDV8W9ax7A3MvDo1e8OYHQiEKCdRpkAZnL8%2B%2B44vn1nNJnjX6ZBBAK0z9CFcSbipsjA3PU3BzAeIhCgXYYOwFz2%2F%2B3%2FUce%2FME4iEKA9hgrA7vNvtR8Bz195TTy%2F58pouh0XegaO6RKBAO0wVAAuZvL9XwpAYDJEIEDzDRWAuax%2FmbvulgAmRwQCNNuwAWgCCC0hAgGaa%2BAA7O7%2Fqz0A27D%2BBXIhAgGaaeAAXMxk%2BXObXv%2FYtnUmoG4iEKB5Bg7AmUwC8IkWHf9u22oRNHkQgQDNMkwA1r7%2FLx397r%2F6XQFMnwgEaI6BAjCf7%2F%2FEH9RJBAI0w6ATwGze%2FwXqJQIByjdQAJ7J5Pu%2FR6%2B%2BPoD6iUCAsg0UgLl8%2Fzd%2F5U8FkAcRCFCuYo6Aff8H%2BRGBAGXaMAAPL8ff7qiZ7%2F8gTyIQoDwbBuBiJhdA2rT%2FD0ojAgHKsmEA2v8HDEIEApRjkACsfQLo8geUQQQClGGQSyAugAADE4EA%2BVs3AA9ns%2F9PAEJJRCBA3tYNwDOZXACZb%2BkFkFOLZwJKJQIB8rVuAOZwASTFX7oE0kanFpcCSiYCAfK00TeAs1Gztk7%2FoClEIEB%2BNgpAF0CATROBAHlZMwBzuQAy%2F8a3BFA%2BEQiQjzUDMJ8LIO3dAegSCE0jAgHysN4R8GzUrO3v%2F7oEQhOJQID6rRmAMxFvi5q5AALNJAIB6rXeBDCDJ%2BB8%2FwdNJQIB6rNqAB5ejr%2FdUbO2XwA5cdI3gDSbCASox6oBuJjB939Jmy%2BAQFuIQIDpWzUAZ7LY%2F9fuCyDQJr0IfO7Fn4ziiECgQGsFYO0XQJ7fc2XgGJj2SBH4tYu%2BHAeXCrz8JQKBwqx1CWQ2avZ3b3QDGNrmldgZf3jySyIQYMLWCsDaj4CfsAKmwzJo2kYEAkzeeQF4OJsXQARgctoyaFpIBAJM1nkBmMMN4OPbd3Z%2BEHHSBJCWEoEAk3NeAM5kEIDWv7zq9GkTQNpLBAJMxmrfAGbwAojj3x7vAdN2IhBg%2FFabAL45avbcpVbA9AhAEIEA45blBNAN4Fe5BQzLRCDA%2BJwTgIeX3%2F%2Bt%2Fw1gAXjWqcUAukQgwHisnADWPv1zA%2FhcJoBwLhEIsHnnBOBiFtM%2FN4D7nThpBAgriUCAzTknAGcymAA%2B7wLIOVwCgdWJQIDRrTwCno2a%2FZ3v%2F84hAGFtIhBgNCsngLWvgHl%2BjwlgvxSAvgOEtYlAgOFlNwF0BHw%2BN4Fhfb0IPPriG6M4IhCoQX4BuOdNwblMAGFjnQg8VXQE3h4AU3I2AA9nEH9WwKzOTWAYzLHXvankCLxDBALT0j8BnI2aWQGzutOnXQSBQYlAgI2dDcDFLCaAFwfnO3HSETAMQwQCrO9sAM6YAGZLAMLwRCDA2vqPgGt%2FBcQKmNW5BAKjEYEAq%2BufAL4tavb8pVcF53MJBEYnAgHOl9UE0DeAq3MEDJsjAgHO5RZwAbwGApsnAgFelc0E0P6%2F9XkNBDZPBAIs6wRgDkugn9%2Fj%2B7%2F1LPgOEMZCBAK8OgGcjZod374rWNuJVwQgjIsIBNquE4CLOayAudQKmPW4CALjJQKBNutNAGsPwOccAa9LAML4iUCgrToBmMMrIJZAr88uQJgMEQi0UTYTQEug1ycAYXJEINA2vQngm4OsOQKGyRKBQJuYABZEBMJkiUCgLTK6BOIbwI0cXTgVwGSJQKANsglANrbwigkgTIMIBJoui0XQXgEZjIsgMD0iEGiyLYdzOP71%2Fd9AfAMI0yUCgaZKE0DHv4U4unA6gOkSgUATZRGAnoEbTJoAnlo0BYRpE4FA02QRgMd37AoGc8pngFALEQg0yZbFHAJw%2B85gMIdeOhlAPUQg0BR5TAAF4MBOLS4FUB8RCDTBlpkMAvDEDgE4qKMLzoChbiIQKJ0JYGG8BgJ5EIFAybZEBk5sdwlkUHYBQj5EIFCqFICzQTHSN4AiEPIhAoESZTEBPL794mBwbgJDXkQgUJpMjoA9RjIME0DIjwgESpJuAb85KIon4SBPIhAoRRYTwOf2eApuGAIQ8iUCgRJkEYAMx5vAkDcRCOQuiz2ADO9FC6Eha70IfHHpqiiOCITGqz0ALYEezdETjoEhdykCvyoCgQzVfgR8Yocl0KPwJByU4cWlK0UgkB3fABbKk3BQDhEI5EYAFipNAF0EgXKIQCAnLoEUzEJoKIsIBHLhEkjBDr3kGBhKIwKBHNR%2BBHx8u0sgo3IRBMokAoG6%2BQawYAePnQygTCIQqJMALJgXQaBsIhCoiwAsnBdBoGwiEKiDACycF0GgfCIQmDYBWLiDx9wEhiYQgcA0CcDCCUBoDhEITIsALNypxSULoaFBRCAwDQKwAQ69ZB0MNIkIBCZNADbA0QUXQaBpRCAwSQKwAZ45agIITSQCgUmpPQCveOGpYHMshIbmEoHAJKQAPBIUz21gaC4RCIybAGyIQy8JQGgyEQiMk28AG8IEEJpPBALjIgAb4ujCou8AoQVEIDAOArBBTAGhHUQgsFm1B%2BDlh9wCHhffAUJ7iEBgM1IAzgeNYAII7SICgVE5Am4Q3wFC%2B4hAYBRZBOAVhw4E4%2FHsEa%2BCQNuIQGBYW5Yingga4%2BAx7wJDG4lAYBiOgBvm4DETQGgrEQgMKosAvNx7wGOT3gVOPwhoJREIDMIt4AZ69sgrAbSXCAQ2YgLYQM8cdQwMbScCgfWkADwSNMrRhdPWwQAiEFhTugVcewDuOPFiMD6nFpfixYXFABCBwGqyOAJ%2B7YIAHLdnfAcIdIlAYKUtWzO4BCIAx893gEA%2FEQj0y%2BIbwNeeOBqMl3UwwEoiEOjJIgB3LAjASbAOBlhJBAJJHhPAhZeC8XMMDKxGBAJbLskgAK%2BwB3AiDh47ZR0MsCoRCO3WuwU8HzXa4RvAiXn2iCkgsDoRCO1lDUzDPfmC7wCBtYlAaKcsJoDJFYcOBOPnVRBgIyIQ2qcTgEsRT0TNdix4kW4SvAoCDEIEQrtkcQScXP6CCeCkPHnIMTCwMREI7ZHNEbDvACfnmaMCEBiMCIR26B0Bz0fNLvcN4MSkY%2BBDx04FwCBEIDRfNkfAJoCT9YxXQYAhiEBotk4Abs3hCNguwImyDgYYlgiE5srmG8DZp%2FcHk%2BMYGBiFCIRm6gVgBu8BOwKeNMfAwChEIDRPJwC77wHXGoGXH%2FIe8KQ5BgZGJQKhWfovgdQ%2BBfQayGQ5BgY2QwRCc%2FQH4MNRM6%2BBTJ6l0MBmiEBohrMBuBRR%2BzXc2acfDSYrLYX2NjCwGSIQytc%2FAZyPmu044SLIpKVj4GePnAyAzRCBULb%2BCeB81OyHDlgFMw0ugwDjIAKhXGcDMIdl0DsWLIOehoPHTjkGBsZCBEKZsjoC%2FiHfAE7NUy6DAGMiAqE8ZwPwkgwC0C7A6XnmqO8AgfERgVCWLSv%2BeD5qZhfgdKRjYDsBgXESgVCOlQFY%2ByK%2BNz%2F9SDAdB18SgMB4iUAowzkBuBTxF1Gzy00Ap%2BZvn18IgHETgZC%2F%2FI6AXxCA0%2BJpOGBSRCDkbeUEcD5qdvmhJ4Pp%2BcEzJwJgEkQg5OucANyawXvAVsFMl52AwCSJQMhTdkfAaRXMaxc8CTdNjz%2F3cgBMigiE%2FJwTgJcs3wKu%2FSawY%2BDpchkEmDQRCHnZssrvzUfNZh0DT5XLIMA0iEDIx3kBaBVMO7kMAkyDCIQ8rDYBrP0iyOwBy6CnzWUQYFpEINRvtQngfNTMTeB6uAwCTIsIhHqdF4A5rIJxE7geLoMA0yQCoT7nBeAlGUwAEzeBp89lEGDaRCDUY8savz8fNXMTuB4ugwDTJgJh%2BlYNwKWIb0bNZg8IwDqkyyBHF04HwDQVH4EP%2FhefCChIvhNAN4Fr89Qhl0GA6Ss6AmfirqWHXv%2FhgEKsNQHMYBXM%2FqAeT77wipUwQC2KjsDFpXtFIKVYNQBzuAmcbgFfYSF0LdJlECthgLqIQJi8VQOwexO49jeB3%2FI33wrqYSUMUCcRCJO1ZZ0%2FNx81cxGkPlbCAHUTgTA5awZgDm8CuwhSLythgLqJQJiM9SaALoK0XFoJYwoI1E0EwvhtWedPzEXNXASpnykgkIMUgV9%2F4bfj5ZcujuKIQDKU9TeAiYsg9UpTwBMnrYQB6nfwddfEV0%2FeJwJhDNYMwEuWbwHPR81cBKnf48%2BZAgJ5EIEwHutNALN4Eu6ax0wA62YxNJATEQibt2WDP5%2FFRZD0LSD1sRgayI0IhM3ZssGfrD0AE7eB65cWQ5sCAjkRgTC67CeAyZsFYO1MAYEciUAYzboB2L0IUnsE%2Bg4wD6aAQI5EIAxvowlgFi%2BCXPPYt4P6mQICuRKBMJxBAnAuamYhdD5MAYFciUAY3IYBuDWT7wD%2Fq%2B%2F9aVC%2FNAV86tArAZAjEQiD2TAAL1kOwCNRsx9yESQbaQoIkCsRCBvbMAC7ap8CvsMEMBvpabinDvkWEMiXCIT1DRSAOVwE8R1gXn7wrOfhgLyJQFjbQAFY%2FUVfiwz4DjAfaQr4%2BHOOgoG8iUBYXTFHwInvAPOSpoBuBAO5E4FwvoECMJeF0L4DzIu9gEApRCCca9AJYPoO8JtRs%2FQd4OyBR4J82AsIlEIEwquGCcAsjoHf8th3gnyYAgIlEYGwbOAA3JrJRZB3OgbOjikgUBIRCEMEYPc7wPmo2eyB%2FZ2jYPJhCgiURgTSdgMHYFIdA%2F9R1Gz5O0C3gXNjCgiURgTSZsMGYBbfAb7je98I8pKmgI8csBwaKEsvAl9Z2hnFEYFswlABmMt3gNc89q0gP0%2B%2B8HIcXTgdACVJEfiHp74kAmmVoQLQd4Bs5JEDxwOgNAeXRCDtMlQAJjl8B5i85zv3Bfk5eOxUHKp%2BAJRGBNImowTgXGTAOph8%2FeAZ3wICZRKBtMXQAbg1kwB0DJyvNAV86pC1MECZRCBtMHQAdr8DnIuaWQeTt%2B8%2FfdxaGKBYIpCmGzoAkxzeBU6sg8mX5dBA6UQgTTZSAG7J5Bh473e%2BFOQrLYc%2BcdIUECiXCKSpRgrAS5YD8EjULB0DX%2FPYt4M8LS%2BHPhYAJROBNNFIAZjksg7mLQIwa88cPWktDFA8EUjTbCYA5yIDN3zXPsDcfd9yaKABRCBNMnIA5vIs3OWHnnIMnLn0PNzjzy0EQOlEIE0xcgDmsg4mcQycvx88e8JaGKARRCBNMHIAJrmsg7nmsW8FeUsXQv7qGVNAoBlEIKXbVADmsg4mHQFfcehAkLe0FsaFEKApRCAl21QA5rIOJnmPyyBFcCEEaBIRSKk2FYBJdQz8xciAY%2BAyuBACNI0IpESbDsAtmdwGTsfAbgOXIV0I8UII0CQikNJsOgArD0cmx8BuA5chXQh56ImXAqBJRCAl2XQA5rQO5v37Ph%2BU4eCxU%2FHs0ZMB0CQikFKMYwIYZzJ5Fs7bwGX5%2FoFjdgMCjSMCKcFYArD7KkgWx8Dv%2BN43gjKk7wDtBgSaSASSu7EEYPcY%2BOHIwN7vfCkoh92AQFOJQHI2lgBMlhwDM6L%2F8MRLjoKBRhKB5GpsAVj9Hd0bmbj5%2Fk8H5XAUDDSZCCRHYwvAnG4Dzx7Y35kEUg5HwUCTFR%2BBf37FTUGjjC0Ak5yOgd%2FzHU%2FDlcZRMNBkRUdgzNyz9MAbrw0aY6wBmNMx8Du%2F96dBWRwFA01XcATuji2n94nA5hhrAOZ0DOxpuDI5CgaaTgSSg7EGYFId4H0xMmEnYJkcBQNNJwKp29gDMKel0GknoMsg5XEUDLSBCKROYw%2FAnJZCp%2Fh7y2PfCsrjKBhoAxFIXcYegMlMxJ2Riffv%2B0JQJkfBQBuIQOowkQCM5QlgFsfA6SJI2gtIedJR8ENPHAuAphOBTNtEAjAdAy%2B5DMIYPHP0ZDz%2BnO8BgeYTgUzTpCaA6e%2F4a5GJ9%2B%2F7vMsgBfvBsyc600CAphOBTMvEAvCS5X2A85EBL4OU7dTiUjzwuIAH2kEEMg0TC8Akp2NgL4OU7ejC6XjkwPEAaIMUgX9y%2BLdj6aWlKIwILMREA7D6O787MuFlkPJZDQO0yX987bvjz576P0UgEzHRAMzpabjkxn2fD8qWVsP4HhBoi7%2F%2Bkf9RBDIREw3AJKen4d75vW%2B4DFK45dUwLwVAW4hAJmHiAZjT03DJjRZDF%2B9gdQxsNQzQJiKQcZt4AOa2E9BKmGb4%2FtPHfQ8ItIoIZJwmHoDdf5BsdgJaCdMcvgcE2kYEMi5TCcDuTsC5yISVMM3ge0CgjUQg4zCVAEyqf5v%2BUWTCSpjmSN8D2g8ItI0IZLOmFoDVP9C9kdFlkJvv%2F3TQDGk%2F4LNHTwZAm4hANmNqAZjbZRBTwGbxPSDQRiKQUU0tALv%2FYNlcBklMAZsjvRf87x47Uv0sAoF2EYGMYqoBmNtlkDQBvOLQgaAZ0gTwkQMnAqBtRCDDmmoAJjMRn42M3DhnMXSTPPnCy%2FFXz4hAoH1EIMOYegDG8gQwm8sge7%2FzJYuhG%2BYHz56wJBpoJRHIoKYegN3LINlMAVP8eR6ueb77%2BIsuhQCtlCLw35z%2Bv6JAInCK6pgApn%2FQuyMjnodrHpdCgDb7wY5fqCKwyIuOInBKagnANAWcyex5OFPA5kkTwAce91II0E5%2FuXizCGRNtQRgV1aXQUwBm8lLIUCbiUDWUlsA5rYSxhSwudJLIY8%2FtxAAbSQCWU2dE8DsVsKYAjbX958%2B7mYw0FoikJVqDcBLlr8DzGYljClgs7kZDLSZCKRfrQGY5LQSJjEFbK7ezWARCLSVCKSn9gDsroQxBWQqlm8Gv2g9DNBaIpCk9gDMbTF0YgrYbEcXTnszGGg1EUjtAZjkthjaFLD5vBkMtJ0IbLcsArA7BfxiZCRNAa84dCBorvRmsPUwQJuJwPbKIgCTHKeAN%2F%2FrIv9DwRDSepgnX3glANpKBLZTNgFYTQEfjowWQyd7v3NfzB7YHzTbIweOdb4LBGgrEdg%2B2QRgMhNxZ2Tm1q%2FcHjTb8nqYo9bDAK0mAtslqwDM7Xm45JrHvt35QbPZEQggAtskqwBMcpwC3ny%2FbwHbIMWfCATaTgS2Q3YBmOsU8B3f%2B0bQfBZFA4jANsguAJMcp4Af%2BcrtlkO3RLoQ8sDjLwVAm4nAZssyAHOcAl5%2B6CnLoVvk4LFT8dATxwKgzURgc2UZgEmOU0BPxLVLei3kkQPHA6DNRGAzZRuAOU4BO8uhXQhplb99fsGTcUDricDmyTYAkzyngF%2BwFqZl0pNxIhBoOxHYLFkHYI5TwMQUsH1EIIAIbJKsAzDJcQpoLUw7iUAAEdgU2QdgrlNAa2HaSQQCiMAmyD4AkxyngNbCtJcIBBCBpSsiAHOdAt5y%2F6fjikMHgvYRgQAisGRFBGBSTQE%2FEhn6ld%2F7RNBOIhBABJaqmACspoDzSxFfjMykCyF7v3tf0E4iEEAElmgmCnK4%2BheqisC%2Fi%2FQvWEaOb98Zv%2Fqb3%2B38TDv9xOt3xI%2B%2FYUcAtNlPbv1y%2FLcXfDKKMxPzsWXmhpm3PzsfLVHMBDCppoBHqgD8bGTGCyGYBAIUPAlcitk4s7Rv6aHXz0ZLFBWASfVP%2BO7qpyORGS%2BEIAIBRGApigvANAXMcS1McutXbg%2FaTQQCiMASFBeAySXLU8D5yMzsgf3VUfBngnYTgQAiMHdFBmCS61qY9%2B%2F7vN2AiECAEIE5KzYAc10OnS6E2A1IkiLwkQPHA6DNRGCeig3AJNdvAdNlkBurSSD87fML8dATxwKgzURgfooOwDQFzHEtTHLL%2FZ9xFEzHky%2B8HP%2FusaNxavFMALSVCMxL0QGYVP8fuCMyXAvjKJh%2BB4%2BdqiLwxThxUgQC7SUC81F8AOa8FsZRMP2OLpyuIvCICARaTQTmofgATLprYR6ODDkKpl%2BKPxEItJ0IrF8jAjCppoC3RYYcBbNSLwLTRBCgrURgvRoTgN21MF%2BLDDkKZqUUgXM%2FOBJPvvBKALSVCKxPYwIw6U4Bs7sQkjgKZjUPPfGShdFAq4nAejQqAKsp4HyuF0LSUfCnPv%2BLASt5NQRoOxE4fY0KwCTnCyHpreBbv3J7wEopAtPCaLsCgbZKEfjtp34tilNoBDYuAJNcL4Qk79%2F3hc43gbDS8sJouwKB9vrzK%2F6ZCJySRgZgzi%2BEJL%2F6e7d1joRhJbsCgbYTgdPRyABMcn0hJLn80FPxK%2F%2BP1TCsbvmG8OF49ujJAGgjETh5jQ3A7gsh2R4Fv%2FN737AahjWdWlyK7z7%2BosshQGuJwMlqbAAmVQTeG8v7AbNkNQwbSZdDHjlwPADaSAROzkw03OGI2aWIh6pf7o4MPb%2FnqvjUb%2FxZHN%2B%2BM2Atu7ZfEO%2F84Z2x48JG%2F99sAKt6x8Jn4vrdd0dxZmI%2BtszcMPP2Z%2BcjM43%2Fb5OcdwMm6XvAm%2B8vcPcRU%2BVyCNBmD27%2F9fjuYrZfda0t40lg4yeAPS9E7Kt%2B2huZ%2BtyH7oq5628JWM%2B2rTPx0298bVy15zUB0DbvvOCuuG7rXVGcDCeBrTlPqkr3I5HpreAkLYj2PSAbSZdD%2FsOTx1wOAVrpgdO3mQSOSWsCMPej4LQX8I7%2F%2B%2BftB2Qg6XLIA49bGg20jwgcj1Z9Ud59Jm4uMuV7QIbxzNGTvgsEWkkEbl7rrhTmfhScnoqzH5BB9ZZGP%2F7cQgC0iQjcnNYFYO5HwclHvnJHzB7YHzCI9F3g958%2Bbl8g0DoicHStuQW8Uu63gtN%2BwDt%2B7Q%2FiuT1XBgwq7Qn8B1fvti8QaBW3g4fX2v%2BWyP0ouPNe8O95L5jhpCPh9F3gU4deDoC2MAkcXmsDsISj4Gse%2B3ZnPQwMI0WgVTFA24jA4bT2CLgn96Pg5J4P3hH33%2FCxgGE5EgbaxnHwYFr%2F3wq5HwUnt9z%2FGZdCGIkjYaBtTAIH0%2FoA7B4FfyQylpZD%2F%2FPP%2F5KXQhhJ70g43RI%2BtWhnINB8InBjzoWiE4FfW4r4bGQsXQr51Od%2F0UshjOxvn1%2BIuR9YHA20gwhcX%2Bu%2FAew5HLG7isCHql%2FORsbmrr8lPvehAr9tICs%2F8fod8eNv2BEATeebwNWZAHZVU8AjVQ3%2FbGT%2BPeDe79znuTg2zVvCQFuYBK5OAPapIvDh3FfDJOlSSApB2IzeW8IuiABNJwLP5wh4FSWshjm%2BfWfc8fE%2FiPkrrwnYrDdd%2BprOkbB1MUCTOQ7u%2F7vkPKV8D%2Bi5OMYpxd%2Fff%2FPFsed12wKgqURg7%2B%2BOVVURuHdpeRKYtRSBn%2FqNP%2BtMBGEcfuTy7dU0cHts22oaCDSTCPQN4JouiZir6jj7DwbSepg7Pvvz1sMwNr11MYeOnQqAJvJNoAnghkr4HjCxHoZJMA0EmqzNk0ABuIFSvgdM7rvx1%2BPLN34yYJx8Gwg0WVsjUAAOoIrAa49t3%2FlQCcesIpBJcVMYaKo2RqAAHFAVgZ%2BoJoFF%2FLsjHQWnI2EYtxR%2F6RWRq%2Fa8JgCapG0RKACHcCji7up%2FYB%2BPAvzWL%2F9uPPjW9wZMgmkg0ERtikABOITu94DpUsi1kTmLopm0bVtnOtPAH75iewA0RVsiUAAOqYrA2e6lkN2RuRSB%2F%2Fw3%2Fj%2BLopmoNAX8B1fvNg0EGqMNESgAR1DKkujEayFMi2NhoEmaHoECcEQlXQoRgUyLSyJAkzQ5AgXgJpR0KUQEMk27tm%2BNd%2F7wLtNAoHhNjUABuAklXQpJRCDT5lgYaIImRqAA3KTupZAUgbNRgBSBn%2FqNP%2BtcEIFpcCwMNEHTIlAAjkF6KaQbgdnfDE7Sapi0IkYEMk0pBH%2F6ja%2BN1%2B%2B%2BKABK1KQIFIBjUkXgrVUE3hOFEIHUxbEwULKmRKAAHKNDEXdU%2FwO9PQohAqmTEARK1YQIFIBjVtLN4EQEUqcUf70QBChJ8REYjN0Ly98D7o1CiEDq5qIIUKJSI3Dx7xbnBOAEdNfDpOfiZqMQIpAcCEGgJDtnDsR%2Fv%2B1n4qKZF6MEp%2F%2F9qVj44vH5xW%2B9YgI4KaWth0nsCSQXKQT%2F%2Fpsvjj2v2xYAOUrx97PbfqH6%2BanI3ZlnFmPht4%2FHyT9eOFKF3w2XRDwsACeotPUwiQgkJ5dVAfj2KgRdFAFyUkr89YXf8h9HfOSyiHvTrwXghJW2HiYRgeTGjWEgFyXE38rwS6oWuXNPxB29PxaAU1BF4Ceq%2F8EX9ZWoCCRHQhCo055j%2B%2BMDl%2F5ytvG3WvglK%2BMvEYBTUtqOwEQEkishCEzbZTP74%2BeqyV%2BOFz4W%2F%2Fp0vPz7J84Lv6SKvy9W8Xfryt8XgFNU2o7AJN0KTreD0y1hyI0QBKbhx%2F7T%2Fxt7r%2Fo%2Fsou%2Fzq3e3z5W%2FXxyrb%2Fk4e6ljyMr%2F4QAnLIXIr5a%2FXRTFCRF4Of%2Bp7vjwbe%2BNyBH6bLIT1Qh6NYwMG5vO%2FGF%2BG8u%2Bc3IyQDhl8x3429%2BtT8pAKesuyMw3Qy%2BNgpzzwfviPtv%2BFhArlIIvunSi%2BwRBMbiugvuindmtOh5wPBL1o2%2FRADWoMRF0T333fjr8eUbPxmQMwulgc36hwu3x9t317%2FEY%2BmlpXjlTxbild8%2FEWf%2B4%2BIgf5MN4y8RgDUpcVF0jwikFL0Q3HPxhb4TBAay7diReM%2Fu%2Fz1%2BcuuXo04p%2FNLFjhR%2BSy%2BdGfRvdnbR80Z%2FoQCsUckROHf9LXHvB%2B%2F0dBxFSPF32esudGEEWNfFx56MD1z6P3du%2FNYlHfOmid9qN3o30o2%2FuQH%2FWurUjcB0HFzMayE96Wbwv%2FjY71oTQ1HSzeE37bnIhRHgHHUveD4190pn4jfA932r6n%2FlYxACMAMlPhnXY1cgpdq1%2FYL4kctf4ztBIP7e8W%2FF%2B7d9LF5z8UsxTSMe857%2F9xNx256Iu4f52wjATJQegb%2F1sd%2BxK5AipSPhN%2By6MH74CsfD0EZpzct%2FfcGdMXPx9JJoiNu8G1rtlY9BCMCMVBG4txuBRbImhtI5HoZ2meaal960Lx31Lv71qRiHUeMvEYCZqSLw1upf0PrvnY%2FIDWGawO1haLb0osc%2FWvj1%2BJFdfxaTlqZ9L%2F%2F%2B8c7PmznmXWkz8ZcIwAyVHoFfv%2BGjnQh0Q5gmMBWEZkmXPW565ebYdfHTMSmTmPad8%2Fe%2FyfhLBGCmSo9Al0NoGlNBKN8kL3uk6Fv869Nj%2B7ZvzX%2BcMcRfIgAz1oQIdDmEJvLkHJTn2q2%2FE%2F9w4Y6xX%2FZIR7sn516Ok3%2Fy8liPeFczrvhLBGDmSo%2FAxOUQmqq3YNoRMeQrvezxrt2fjbdVATgukz7iXfUfc4zxlwjAAjQhAl0OoelSDKbvBdNU0BEx5CF97%2Fe%2Bl38prtj5l7FZvTd5U%2FRN8oh31X%2FsMcdfIgAL0YQI9HIIbdE7Iva9INRnHN%2F71Rl9Z%2F85TCD%2BEgFYkCZEoO8CaRsxCNP3zoXPxHW7h3oY46wUfSe%2F%2BUrnLd50qWPS3%2FWt%2B89lQvGXCMDCNCECE0fCtJEYhMlK%2B%2F3e9%2FwvxlVvfGCov13%2FpK%2Fu6Dv7z2mC8ZcIwAI1JQLnrr8l7v3gnfYF0kpiEMZrz7H98YFLfzl2zjw10F9%2F5pkzndu7dR7vrmXS8ZcIwEKV%2FHZwP%2FsCIWLX9gs6MXjZxdtiZ%2FVrYDiDrnhJK1tOVbF3uvsjR9OIv0QAFqwpEZgmgOlI2KoYsFoGhrHRk2695czT2tO3WdV%2Fp99Wxd9oHy8OSQAWrorA2W4EzkbhPCEH59q2daZzVPyGXRc6KoYV0i3ff3zJp8478u0%2F2s3le75BVP8sP3JZxL0xJQKwAZoUgY6EYW3pqLgThLsvNB2k1fpv%2BfZu7S7%2B1akipnyrOFLF2M9eEjEXUyQAG6JJEZh4PQQ21psO%2BnaQtkiLnf%2FRwm3x%2Br%2F5t50pX5rw5fot34BS%2FN1Qxd%2FDMWUCsEGaFoHplvCX3%2FdJ00AYQP9x8a4dFwhCGuPU4lK8uHA6fvwbvxf%2FeO5%2Fiwsee6HEKd9q5rvxNx81EIANU0Xg7m4EXhsNkI6EP%2Fehu2L%2F1e8KYHDpe8HekbEJISVJwXfo2Kk4%2BNKpOFqF38Jzh%2BLDf3h73PCd%2B6JBao2%2FRAA21MGIe7dEfDgawuJo2Jw0IUxB2D8hTL8HdTtx8kwVfCfj6InFeOboK50%2F7rnmsW%2FHr%2F7ebXH5ocF2%2BxXi4W78HYka%2BU9%2Fgx2KuKP6F%2Fj2aAgXRGC8%2BieEaWJoSsik9aZ7R0%2Bc7kz3Dla%2FTr%2B30mtPvBg3%2F%2BtPx%2Fv3fSGapPr%2F6Rer4cwn6o6%2FRAA2XNMiMDENhMnoTQk7YSgK2aTet3vLsbdYxd7Jc6Z7a2no1C%2FF32f3VPEXmRCALXC4%2Bjdc9W%2B8u6JBTANhOkQhg0hh92rsLf8YJPb6NXXql0zrdY9hCMCWaMqrIf28IAL1SUG4%2FGrJts43hSkUhWHz9ULvxCuLnanecugtrnqMO4ymTv0qR6oMvm2aC54HJQBbpGlrYnrSDeF%2F%2BaG7TQOhZr1p4dmp4Y4LTAwLNanQW6nJU79Yvun7s3Xs%2BBuEAGyZbgR%2BNRqyJqafbwMhXykEd1y49dVA7Jsauo08fSnkFk4uh92p00udyDu1eGako9tRNXjql9S%2B5mUj%2FlPXQmlX4GLE3U1aE9Pj20AoTwrAFIfnTBC7gehoeXgp7nqB15narQi83p%2BvS8Onfslcd%2FJX%2B03f9QjAFmviDeEe00Bolv5I7P%2F1jou2VD9vOfv727u%2F3zS9qVwv6jq%2F98qZszF3ohd7NcfdRt6%2F7%2FNV%2FH2mE4FNlNtN3%2FUIwJZr4g3hnjQN%2FK2P%2FU7MX3lNAO3SC8JeHCYpGpd%2F3nL2r0sBefbX3T%2Ffb%2FsqvzeohW6o9SzH2avHqyngXv39pe6vz5wNupV%2FrmRXVMe8v1Id96Zj36aq%2FlW6rYq%2Fu6MQApDeDeH0XeBsNJA3hQHqkSZ9N859Pt4%2F94XGTv0qR7pHvnNREAFIR1NvCPekaWA6Fp677pYAYPIafsmjJ%2FvLHmsRgJyVLodUBxJ3zzTwckhPOg7%2BFx%2F7XdNAgAlpw3FvktOzbqMQgJynyZdDetI08JvX%2FYIQBBiTlhz3duT4ssewBCCrqqaBN1X%2FBr8nGvRyyEqOhQHGY%2B9374tb7v9M0497kyK%2F91uNAGRNTf8usMexMMBo0jHvzfd%2FuvHHvV0Pd%2BNvPhpAALKuNnwX2OO2MMBg0nd%2BaZ%2Ff3u%2FcF22Q9vttqY58S%2F3ebzUCkIG04bvAJB0L77vuZkukAVbRpu%2F8uo50v%2FcrZr%2FfoAQgA2v6vsB%2Bvg8EOFc66m1R%2BCXz3SPfh6OBBCBD6X4XmCLw2miBFIKf%2B9Bdsf%2FqdwVAG73je9%2BIj3zl9jZc8Dir9BUvgxCAjKQtR8I9vg8E2qZlFzx6Gnvku5IAZGTdVTHpHeHZaAkhCDRdS8MvafSR70oCkE1p25FwjxAEmqbF4dfIW74bEYCMRduOhHu8KAKUrs3hVzlyJuK2yyLujZYRgIxNNQ3c2309ZDZapLc6RggCJWl5%2BCVzVQR9pCmLnYclABmrdCR8Znka2PjF0SsJQaAEwq9z5HtbGy56rEcAMhFVCH5iaflIuLFvCa9FCAI5En4drbrosR4ByMS05S3htaQQTPsDXRYB6iT8lrXxosd6BCAT19YLIv3cGgambe9374v37%2FtCzB7YHy033%2F3Wby44SwAyFW16Rm49QhCYpBa%2B1bsuU7%2B1CUCmporA3d0LIh%2BPluscDd%2F4SU%2FMAWNxxaGn4j1p4if8eo50p35fC1YlAJm6KgRv7V4QmY2WS98Jpl2Cc9fdEgDD8n3f%2BWaWo%2B8jpn7rE4DUos3rYlaTQvBP9v5S%2FPlb3%2Bd4GFhXmvDtfeBL8Y6%2F%2BIbwO5dv%2FYYgAKmVaeD5fCcIrMb3fWvzrd%2FwBCC1Mw1cXfo%2BMMWg42FoN8e86zL1G5EAJBttfUpuI%2FYJQvuY9m3M1G9zBCBZ6d4U%2FkTb9wau5YG3vreaCv5CPFj9DDSPad9A0hu%2Bt3nNY3MEIFlq%2BysiGzEVhOZIsfeWx75l2rexI9V%2FL9zZ9jd8x0UAkrVDr%2B4NbN2bwoPyrSCUx03e4VT%2FPXBvLE%2F9HPeOiQAkey6JDOb4jp3V0fDPdELQgmnIT4q%2B2af3d45408%2BmfQNxyWNCBCDFsDJmcOmI%2BIEqBu%2Ff%2B1FHxFCzNOF7x%2Fe%2BEXu%2F%2ByXRN7h03PvZ6rj3jmAiBCDF6R4LuyQyoPkrr4mv3%2FDRePRH3y0GYUpE3%2Bi6x713VlO%2F%2BWBiBCBFciw8mt73gmIQxk%2F0bVq63Xun497pEIAUzbHw6MQgbJ7oGwu3e2sgAGkEt4U3J8Xgg297bzz4094ihvX0LnKIvrE40l3mfLfbvdMnAGkMx8Ljkb4Z3H%2F1uzvLpt0mhnNXtri9OzZz3du980EtBCCN010i%2FdXql9cGm9JbOJ1uFD%2F6o%2B%2FqrJqBNugtZ04%2F29M3Vr7zy4QApLF8Hzh%2BvaPi%2FT%2F67s6kEJoiTfXe8f0%2FjWv%2B%2Btudn035xs4%2Bv8wIQBpPCE5GbzqYfrhIQmlS4L3lb77dvcTxp3HFoaeCiXDBI1MCkFbofh94q%2F2Bk9P7dnA5CB0Xk5f%2ByxuzBx5xrDt5LnhkTgDSKi6KTI8gpE79Ez7BN1XCrxACkFYSgtOXgnA5Ct8V82%2B8xjeEjNUVhw5Uwfetzjd8Kfwc6U6d8CuMAKTVhGB90kRwfzUZnL%2Fyp%2BLRbhSaEjKIldM9q1nq1X267TbhVxYBCNEJwb3diyJ7g9qkqeBzl14Zj%2F5YCsKfEoWcjb0rXngy3lJN92afftR0LxPe7C2bAIQ%2BQjA%2FvShMk8L06%2Bc7v3Z83ES9Y9zZA4%2FG5YeejGuq8DPZy0466v1i96h3PiiWAIRVCMG8pang8neEPxXP73ljZ1r4%2FKVXWUVTgBR0r114sRN6l1fBl6Z5vtkrgm%2F8GkYAwjqEYFlSGHZCsG9ieGL7TkfJNUjTvDc%2Fvb9zdHv5oac7Ez3Ht0USfg0lAGEALouUrz8On9%2Fzps7k8LlL3yQQR9Cb4l3%2BwlPLP7qTvOU%2FPiDymkH4NZwAhCEIwWZ7bs9VnW8Mj1dRmCJx%2BecrO%2BGYfn1i%2B65GHzOvDLvXLhyNHSde6gTdjurXV1Rx1%2Fl93%2BU1WXqy7bPVz%2FcKv2YTgDACIdhuaVp4vIrBFIudPz4bh1d1%2FvjEjos7fz79SBPGnhSSZ%2F8%2Bqt8fx9SxF239UqQlOxZe7ERc5%2FeqKV3Sm86loFuOvXN%2Fn9aam1m%2B0TsXtIIAhE3oe2IuheBsAJRF%2BLWUAIQxqWLw1u6FkdkAyFfv%2B757rXJpLwEIY1aF4E3V%2F3L9eLg5DORlvm%2BHn%2B%2F7Wk4AwoT4ThDIhGNeziMAYcIOLx8J73U8DEyRNS6sSwDCFHUXS6fj4ZsCYPzmumtc5oQf6xGAUIO%2B4%2BH3hKkgsDm9ad%2BcY14GJQChZt3bw%2Bk7wb0BMDjTPkYmACETdgoCA%2FBtH2MhACFD6VvBvhgE2u1Id33L1xzxMi4CEDJWheDuWN4r6IgY2icd8X4xlsPPtI%2BxEoBQiO46md6S6dkAmihF3x%2FF8isdoo%2BJEYBQoCoGr62OiD%2FhFjE0wlz1f9h909NsTJMAhML1fS8oBqEcoo9aCUBoEDEIWRN9ZEMAQkOJQchC75u%2Br4k%2BciIAoQW6MXhTNwavDWBS0sWNh13kIHcCEFqme5t4r9UyMDbz1X%2Be%2Fijt6at%2B%2FbDoowQCEFqsu2ewfzo4G8BG%2Bqd86Rm2hwMKIwCBsw4vHw%2Bn6eA%2FDdNB6GfKR6MIQGBVfdPBvb4dpIXS82tfq4Lvm7E85ZsPaBABCAyk%2B%2B3gtY6Laag00Us3dlPwubFL4wlAYCS9yyTdCeHbwoSQsqQj3blqwvcXIfhoIQEIjEXfhLAXhHsD8vFwdwlzurDhSJfWE4DAxBxejsBrl179hnA2YPL6j3NT8Lm0ASsIQGBq%2BqaE1%2FZdLNkdMLpO7FX%2FR8YT1XRvLpZjbz6AdQlAoFYrojAdHXf%2BOOB887G8f%2B%2BbvV%2BLPRiNAASy011BkyIwheFs3yUT08J26CxarqZ6f9H9Zi%2F9mHeMC%2BMjAIFirBGGs%2BHbwlLNx3LoPSH0YLoEIFC8bhjOph9nupPCbhz2gpF6HIlXp3kp8ubD0S1kQQACjXf41SlhCsT085tnln%2FuhaOj5dHMx%2FKLGWlyd7QbeJ3gSz%2BLPMiXAASIcyKxE4Vnln9%2B84uv2zO769ih6PtzTY%2FF%2Bd7PS8u%2FPlr9ONIXd52fxR2UTQACDOnwqyE42%2F2tzs9nXv3j9Od2pV%2FMnP994uwqf5er%2Fd5GeserK833frF0bqQ9kf6fLa%2F%2B7c774ds7aI%2F%2FDOxMBSGJWFiyAAAAAElFTkSuQmCC%22%20id%3D%22c%22%20width%3D%22640%22%20height%3D%22640%22%2F%3E%3C%2Fdefs%3E%3C%2Fsvg%3E');
    background-size: cover;
  }
}

import '@rhds/elements/rh-cta/rh-cta.js';
import '@rhds/elements/rh-announcement/rh-announcement.js';

<rh-announcement color-palette="lighter" dismissable="">
  <p>Join us at Red Hat Summit — register now for early access.</p>
  <rh-cta slot="cta" href="#">Register</rh-cta>
</rh-announcement>

<link rel="stylesheet" href="../rh-announcement-lightdom-shim.css">

import { Announcement } from "@rhds/elements/react/rh-announcement/rh-announcement.js";
import { Cta } from "@rhds/elements/react/rh-cta/rh-cta.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Announcement color-palette="lighter" dismissable>
    <p>Join us at Red Hat Summit — register now for early access.</p>
    <Cta slot="cta" href="#">Register</Cta>
  </Announcement>
  <link rel="stylesheet" href="../rh-announcement-lightdom-shim.css" />
);

import '@rhds/elements/rh-cta/rh-cta.js';
import '@rhds/elements/rh-announcement/rh-announcement.js';
import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';

<rh-context-demo>
  <rh-announcement>
    <svg slot="image" width="80" height="48" role="img" aria-label="Sample image">
      <rect fill="light-dark(var(--rh-color-surface-dark, #383838), var(--rh-color-surface-light, #e0e0e0))" stroke="var(--rh-color-border-subtle)" stroke-width="2px" width="100%" height="100%" stroke-dasharray="4 4">
      </rect>
      <text x="17" y="30" style="font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace); font-size: var(--rh-font-size-body-text-md, 1rem);" fill="light-dark(var(--rh-color-text-primary-on-dark, #ffffff), var(--rh-color-text-primary-on-light, #151515))">
    Image
      </text>
    </svg>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit adipisicing elit adipisicing elit.</p>
    <rh-cta slot="cta" href="#">Learn More</rh-cta>
  </rh-announcement>
</rh-context-demo>

<link rel="stylesheet" href="../rh-announcement-lightdom-shim.css">

import { Announcement } from "@rhds/elements/react/rh-announcement/rh-announcement.js";
import { ContextDemo } from "@rhds/elements/react/rh-context-demo/rh-context-demo.js";
import { Cta } from "@rhds/elements/react/rh-cta/rh-cta.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <ContextDemo>
    <Announcement>
      <svg slot="image" width="80" height="48" role="img" aria-label="Sample image">
        <rect fill="light-dark(var(--rh-color-surface-dark, #383838), var(--rh-color-surface-light, #e0e0e0))" stroke="var(--rh-color-border-subtle)" stroke-width="2px" width="100%" height="100%" stroke-dasharray="4 4" />
        <text x="17" y="30" style="font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace); font-size: var(--rh-font-size-body-text-md, 1rem);" fill="light-dark(var(--rh-color-text-primary-on-dark, #ffffff), var(--rh-color-text-primary-on-light, #151515))">Image</text>
      </svg>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit adipisicing elit adipisicing elit.</p>
      <Cta slot="cta" href="#">Learn More</Cta>
    </Announcement>
  </ContextDemo>
  <link rel="stylesheet" href="../rh-announcement-lightdom-shim.css" />
);

import '@rhds/elements/rh-cta/rh-cta.js';
import '@rhds/elements/rh-announcement/rh-announcement.js';

<rh-announcement dismissable="">
    <svg slot="image" width="80" height="48" role="img" aria-label="Sample image">
      <rect fill="light-dark(var(--rh-color-surface-dark, #383838), var(--rh-color-surface-light, #e0e0e0))" stroke="var(--rh-color-border-subtle)" stroke-width="2px" width="100%" height="100%" stroke-dasharray="4 4">
      </rect>
      <text x="17" y="30" style="font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace); font-size: var(--rh-font-size-body-text-md, 1rem);" fill="light-dark(var(--rh-color-text-primary-on-dark, #ffffff), var(--rh-color-text-primary-on-light, #151515))">
    Image
      </text>
    </svg>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit ipsum dolor sit.</p>
  <rh-cta slot="cta" href="#">Learn More</rh-cta>
</rh-announcement>

<rh-announcement dismissable="" color-palette="dark" image-position="inline-start">
    <svg slot="image" width="80" height="48" role="img" aria-label="Sample image">
      <rect fill="light-dark(var(--rh-color-surface-dark, #383838), var(--rh-color-surface-light, #e0e0e0))" stroke="var(--rh-color-border-subtle)" stroke-width="2px" width="100%" height="100%" stroke-dasharray="4 4">
      </rect>
      <text x="17" y="30" style="font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace); font-size: var(--rh-font-size-body-text-md, 1rem);" fill="light-dark(var(--rh-color-text-primary-on-dark, #ffffff), var(--rh-color-text-primary-on-light, #151515))">
    Image
      </text>
    </svg>
  <p>An announcement with <code>inline-start</code> for the value of <code>image position</code>.</p>
  <rh-cta slot="cta" href="#">Learn More</rh-cta>
</rh-announcement>

<rh-announcement dismissable="" image-position="block-start">
  <svg slot="image" width="80" height="48" role="img" aria-label="Sample image">
    <rect fill="light-dark(var(--rh-color-surface-dark, #383838), var(--rh-color-surface-light, #e0e0e0))" stroke="var(--rh-color-border-subtle)" stroke-width="2px" width="100%" height="100%" stroke-dasharray="4 4">
    </rect>
    <text x="17" y="30" style="font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace); font-size: var(--rh-font-size-body-text-md, 1rem);" fill="light-dark(var(--rh-color-text-primary-on-dark, #ffffff), var(--rh-color-text-primary-on-light, #151515))">
  Image
    </text>
  </svg>
  <p>An announcement with <code>block-start</code> for the value of <code>image position</code>.</p>
  <rh-cta slot="cta" href="#">Learn More</rh-cta>
</rh-announcement>

<link rel="stylesheet" href="../rh-announcement-lightdom-shim.css">

import { Announcement } from "@rhds/elements/react/rh-announcement/rh-announcement.js";
import { Cta } from "@rhds/elements/react/rh-cta/rh-cta.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Announcement dismissable>
    <svg slot="image" width="80" height="48" role="img" aria-label="Sample image">
      <rect fill="light-dark(var(--rh-color-surface-dark, #383838), var(--rh-color-surface-light, #e0e0e0))" stroke="var(--rh-color-border-subtle)" stroke-width="2px" width="100%" height="100%" stroke-dasharray="4 4" />
      <text x="17" y="30" style="font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace); font-size: var(--rh-font-size-body-text-md, 1rem);" fill="light-dark(var(--rh-color-text-primary-on-dark, #ffffff), var(--rh-color-text-primary-on-light, #151515))">Image</text>
    </svg>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit ipsum dolor sit.</p>
    <Cta slot="cta" href="#">Learn More</Cta>
  </Announcement>
  <Announcement dismissable color-palette="dark" image-position="inline-start">
    <svg slot="image" width="80" height="48" role="img" aria-label="Sample image">
      <rect fill="light-dark(var(--rh-color-surface-dark, #383838), var(--rh-color-surface-light, #e0e0e0))" stroke="var(--rh-color-border-subtle)" stroke-width="2px" width="100%" height="100%" stroke-dasharray="4 4" />
      <text x="17" y="30" style="font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace); font-size: var(--rh-font-size-body-text-md, 1rem);" fill="light-dark(var(--rh-color-text-primary-on-dark, #ffffff), var(--rh-color-text-primary-on-light, #151515))">Image</text>
    </svg>
    <p>
      An announcement with
      <code>inline-start</code>
      for the value of
      <code>image position</code>
      .
    </p>
    <Cta slot="cta" href="#">Learn More</Cta>
  </Announcement>
  <Announcement dismissable image-position="block-start">
    <svg slot="image" width="80" height="48" role="img" aria-label="Sample image">
      <rect fill="light-dark(var(--rh-color-surface-dark, #383838), var(--rh-color-surface-light, #e0e0e0))" stroke="var(--rh-color-border-subtle)" stroke-width="2px" width="100%" height="100%" stroke-dasharray="4 4" />
      <text x="17" y="30" style="font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace); font-size: var(--rh-font-size-body-text-md, 1rem);" fill="light-dark(var(--rh-color-text-primary-on-dark, #ffffff), var(--rh-color-text-primary-on-light, #151515))">Image</text>
    </svg>
    <p>
      An announcement with
      <code>block-start</code>
      for the value of
      <code>image position</code>
      .
    </p>
    <Cta slot="cta" href="#">Learn More</Cta>
  </Announcement>
  <link rel="stylesheet" href="../rh-announcement-lightdom-shim.css" />
);

import '@rhds/elements/rh-cta/rh-cta.js';
import '@rhds/elements/rh-announcement/rh-announcement.js';

const getAnnouncement = document.querySelector('rh-announcement');
getAnnouncement.addEventListener('close', closeEvent);

// Replace with custom close event logic:
function closeEvent() {
  window.alert('Close event fired.')
}

<rh-announcement dismissable="">
  <svg slot="image" width="80" height="48" role="img" aria-label="Sample image">
    <rect fill="light-dark(var(--rh-color-surface-dark, #383838), var(--rh-color-surface-light, #e0e0e0))" stroke="var(--rh-color-border-subtle)" stroke-width="2px" width="100%" height="100%" stroke-dasharray="4 4">
    </rect>
    <text x="17" y="30" style="font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace); font-size: var(--rh-font-size-body-text-md, 1rem);" fill="light-dark(var(--rh-color-text-primary-on-dark, #ffffff), var(--rh-color-text-primary-on-light, #151515))">
  Image
    </text>
  </svg>
  <p>Click the close button to fire the <code>close</code> event.</p>
  <rh-cta slot="cta" href="#">Learn More</rh-cta>
</rh-announcement>

<link rel="stylesheet" href="../rh-announcement-lightdom-shim.css">

import { Announcement } from "@rhds/elements/react/rh-announcement/rh-announcement.js";
import { Cta } from "@rhds/elements/react/rh-cta/rh-cta.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Announcement dismissable>
    <svg slot="image" width="80" height="48" role="img" aria-label="Sample image">
      <rect fill="light-dark(var(--rh-color-surface-dark, #383838), var(--rh-color-surface-light, #e0e0e0))" stroke="var(--rh-color-border-subtle)" stroke-width="2px" width="100%" height="100%" stroke-dasharray="4 4" />
      <text x="17" y="30" style="font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace); font-size: var(--rh-font-size-body-text-md, 1rem);" fill="light-dark(var(--rh-color-text-primary-on-dark, #ffffff), var(--rh-color-text-primary-on-light, #151515))">Image</text>
    </svg>
    <p>
      Click the close button to fire the
      <code>close</code>
      event.
    </p>
    <Cta slot="cta" href="#">Learn More</Cta>
  </Announcement>
  <link rel="stylesheet" href="../rh-announcement-lightdom-shim.css" />
);

import '@rhds/elements/rh-cta/rh-cta.js';
import '@rhds/elements/rh-announcement/rh-announcement.js';

<rh-announcement image-position="inline-start">
    <svg slot="image" width="80" height="48" role="img" aria-label="Sample image">
      <rect fill="light-dark(var(--rh-color-surface-dark, #383838), var(--rh-color-surface-light, #e0e0e0))" stroke="var(--rh-color-border-subtle)" stroke-width="2px" width="100%" height="100%" stroke-dasharray="4 4">
      </rect>
      <text x="17" y="30" style="font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace); font-size: var(--rh-font-size-body-text-md, 1rem);" fill="light-dark(var(--rh-color-text-primary-on-dark, #ffffff), var(--rh-color-text-primary-on-light, #151515))">
    Image
      </text>
    </svg>
  <p>On mobile viewports, the image will stay to the left (inline-start) of this main body content.</p>
  <rh-cta slot="cta" href="#">Learn More</rh-cta>
</rh-announcement>

<rh-announcement image-position="block-start" color-palette="dark">
    <svg slot="image" width="80" height="48" role="img" aria-label="Sample image">
      <rect fill="light-dark(var(--rh-color-surface-dark, #383838), var(--rh-color-surface-light, #e0e0e0))" stroke="var(--rh-color-border-subtle)" stroke-width="2px" width="100%" height="100%" stroke-dasharray="4 4">
      </rect>
      <text x="17" y="30" style="font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace); font-size: var(--rh-font-size-body-text-md, 1rem);" fill="light-dark(var(--rh-color-text-primary-on-dark, #ffffff), var(--rh-color-text-primary-on-light, #151515))">
    Image
      </text>
    </svg>
  <p>In this <code>block-start</code> version, the image stays on top of the body content on mobile viewports.</p>
  <rh-cta slot="cta" href="#">Learn More</rh-cta>
</rh-announcement>

<link rel="stylesheet" href="../rh-announcement-lightdom-shim.css">

import { Announcement } from "@rhds/elements/react/rh-announcement/rh-announcement.js";
import { Cta } from "@rhds/elements/react/rh-cta/rh-cta.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Announcement image-position="inline-start">
    <svg slot="image" width="80" height="48" role="img" aria-label="Sample image">
      <rect fill="light-dark(var(--rh-color-surface-dark, #383838), var(--rh-color-surface-light, #e0e0e0))" stroke="var(--rh-color-border-subtle)" stroke-width="2px" width="100%" height="100%" stroke-dasharray="4 4" />
      <text x="17" y="30" style="font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace); font-size: var(--rh-font-size-body-text-md, 1rem);" fill="light-dark(var(--rh-color-text-primary-on-dark, #ffffff), var(--rh-color-text-primary-on-light, #151515))">Image</text>
    </svg>
    <p>On mobile viewports, the image will stay to the left (inline-start) of this main body content.</p>
    <Cta slot="cta" href="#">Learn More</Cta>
  </Announcement>
  <Announcement image-position="block-start" color-palette="dark">
    <svg slot="image" width="80" height="48" role="img" aria-label="Sample image">
      <rect fill="light-dark(var(--rh-color-surface-dark, #383838), var(--rh-color-surface-light, #e0e0e0))" stroke="var(--rh-color-border-subtle)" stroke-width="2px" width="100%" height="100%" stroke-dasharray="4 4" />
      <text x="17" y="30" style="font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace); font-size: var(--rh-font-size-body-text-md, 1rem);" fill="light-dark(var(--rh-color-text-primary-on-dark, #ffffff), var(--rh-color-text-primary-on-light, #151515))">Image</text>
    </svg>
    <p>
      In this
      <code>block-start</code>
      version, the image stays on top of the body content on mobile viewports.
    </p>
    <Cta slot="cta" href="#">Learn More</Cta>
  </Announcement>
  <link rel="stylesheet" href="../rh-announcement-lightdom-shim.css" />
);