body {
  margin: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 2rem;
  background: #B0BEC5;
}
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;
  a {
    text-decoration: none;
    color: #455A64;
    &:hover, &:focus {
      color: #2196F3;
    }
  }
  h2 {
    padding: 1rem 1rem;
    margin: 0;
  }
}

const RSS_URL = `https://codepen.io/picks/feed/`;

$.ajax(RSS_URL, {
  accepts: {
    xml: "application/rss+xml"
  },

  dataType: "xml",

  success: function(data) {
    $(data)
      .find("item")
      .each(function() {
        const el = $(this);

        const template = `
          <article>
            <img src="${el.find("link").text()}/image/large.png" alt="">
            <h2>
              <a href="${el
                .find("link")
                .text()}" target="_blank" rel="noopener">
                ${el.find("title").text()}
              </a>
            </h2>
          </article>
        `;

        document.body.insertAdjacentHTML("beforeend", template);
      });
  }
});