body {
  margin: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 2rem;
  background: #FFB74D;
}
img {
  max-width: 100%;
  box-shadow: 0 0 3px #B0BEC5;
}

article {
  background: #ECEFF1;
  border-radius: 4px;
  overflow: hidden;
  font: 12px/1.1 system-ui, sans-serif;
  padding: 1rem;
  a {
    text-decoration: none;
    color: #455A64;
    &:hover, &:focus {
      color: #2196F3;
    }
  }
  h2 {
    margin: 0 0 0.5rem 0;
  }
  p {
    margin: 0;
  }
}

const CORS = `https://cors-anywhere.herokuapp.com/`;
const RSS_URL = `https://feedbin.com/starred/630a51376f6236f1db65212704980f4f.xml`;

fetch(CORS + RSS_URL)
  .then(response => response.text())
  .then(str => new window.DOMParser().parseFromString(str, "text/xml"))
  .then(data => {
    const items = data.querySelectorAll("item");
    let html = ``;
    items.forEach(el => {
      console.log(el);
      html += `
        <article>
          <h2>
            <a href="${el.querySelector("link").innerHTML}" target="_blank" rel="noopener">
              ${el.querySelector("title").innerHTML.replace("<![CDATA[", "").replace("]]>", "")}
            </a>
          </h2>
          <p>
            ${new URL(el.querySelector("link").innerHTML).hostname.replace('www.', '')}
          </p>
        </article>
      `;
    });
    document.body.insertAdjacentHTML("beforeend", html);
  });