(function (el) {
    let tmpl = `
    <div class="adobe-webpage">
        <div class="block-inner {{img_side}}">
            <div class="col col-contents">
                <div class="contents">
                    <h1>{{title}}</h1>
                    <p>{{content}}</p>
                    <a class="button" href="{{button_link}}" target="{{button_target}}">{{button_label}}</a>
                </div>
            </div>
            <div class="col col-image">
                <div class="emb-link">
                    <script id="asp-embed-script" type="module" type="text/javascript" charset="utf-8" src="https://new.express.adobe.com/webpage/static/embed/embed.js"></script>
                    <a class="asp-embed-link" href="{{adobe_link}}" target="_blank"> 
                        <img src="{{img}}" alt="{{title}}"/>
                    </a>
                </div>
            </div>
        </div>
    </div>
`;
    let styles = `.adobe-webpage .block-inner{display:flex;flex-direction:row;align-items:center;}.adobe-webpage .block-inner .col-contents .contents{display:flex;flex-direction:column;gap:.5rem;}.adobe-webpage .block-inner .col-contents .contents .button{width:fit-content;}.adobe-webpage .block-inner .col-image .emb-link{width:90%;margin:auto;}.adobe-webpage .block-inner.image-left{flex-direction:row-reverse;}.adobe-webpage .block-inner.image-left .col-image{display:flex;justify-content:flex-start;}.adobe-webpage .block-inner.image-left .col-image .image-pointed{clip-path:polygon(0 0,75% 0,100% 50%,75% 100%,0 100%);}.adobe-webpage .block-inner.image-right{flex-direction:row;}.adobe-webpage .block-inner.image-right .col-image{display:flex;justify-content:flex-end;}.adobe-webpage .block-inner.image-right .col-image .image-pointed{clip-path:polygon(25% 0%,100% 0%,100% 100%,25% 100%,0% 50%);}.adobe-webpage .block-inner .col{width:50%;}.adobe-webpage .block-inner .col.col-contents .contents{width:90%;justify-content:center;margin:auto;display:flex;flex-direction:column;gap:1rem;}.adobe-webpage .block-inner .col.col-contents .contents p,.adobe-webpage .block-inner .col.col-contents .contents h1{max-width:640px;}.adobe-webpage .block-inner .col.col-contents .contents h1{font-size:3rem;position:relative;margin-top:0;letter-spacing:-.1rem;color:#a80000;margin-bottom:0;}.adobe-webpage .block-inner .col.col-contents .contents p{line-height:1.5;}.adobe-webpage .block-inner .col.col-contents .contents p .admissions{display:inline-block;font-size:1.5rem;line-height:1.1em;padding:10px 20px;border:2px solid #a80000;border-radius:5px;text-decoration:none;color:#a80000;font-weight:500;cursor:pointer;}.adobe-webpage .block-inner .col.col-contents .contents p .admissions:hover{background-color:#a80000;color:#fff;}.adobe-webpage .block-inner .col.col-contents .contents .button{padding:1rem 1.5rem;}@media screen and (min-width:768px) and (max-width:991px){.adobe-webpage .block-inner.image-right,.adobe-webpage .block-inner.image-left{flex-direction:column-reverse;gap:1rem;}.adobe-webpage .block-inner .col{width:100%;}.adobe-webpage .block-inner .col.col-contents .contents h1{font-size:2rem;}.adobe-webpage .block-inner .col.col-image .emb-link{width:100%;}}@media screen and (max-width:767px){.adobe-webpage .block-inner.image-right,.adobe-webpage .block-inner.image-left{flex-direction:column-reverse;gap:1rem;}.adobe-webpage .block-inner .col{width:100%;}.adobe-webpage .block-inner .col.col-contents .contents h1{font-size:2rem;}.adobe-webpage .block-inner .col.col-image .emb-link{width:100%;}}`;
     
    if (el) {
        el.innerHTML = `${tmpl}<style>${styles}</style>`;
        let html = '';
    }

    renderScripts(el);
})(document.querySelector('#'));

function renderScripts(dom) {
    dom.querySelectorAll('script').forEach(function (s) {
        let script = document.createElement('script');
        [...s.attributes].map(function (attr) { return script.setAttribute(attr.name, attr.value) });
        script.textContent = s.textContent;
        s.parentNode.replaceChild(script, s);
    });
}