This layout uses CSS Grid, SVG, shape-outside and shape-margin, flex box.

• View the layout
• Check out code on Github

CSS Code

<style type="text/css">
      body {
        display: grid;
        grid-template-columns: 4fr 3fr;
        grid-template-rows: auto;
        grid-column-gap: 4vw;
        grid-template-areas:
        "header header"
        "article aside"
        "article aside"
        "article aside"
        "article aside"
        "footer footer";
        font-family: 'Noto Serif', serif;
        margin: 1vw;
      }

      h1, h2, h3 {
        font-family: 'Playfair Display', serif;
        font-weight: 900;
      }

      header {
        grid-area: header;
        display: flex;
        align-items: baseline;  
      }

      header > h1 {
        font-size: var(--font-size-display);
        margin: 0;
      }

      header > p {
        font-family: 'Playfair Display', serif;
        font-size: var(--font-size-medium);
        margin: 0 0 0 2em;
      }

      article {
        grid-area: article;
        font-size: var(--font-size-medium);
      }

      figcaption {
        margin-top: 1em;
        text-align: center;
        font-size: small;
        font-style: italic;
      }

      .cardinal {
        color: #d00000;
        float: left;
        shape-margin: 2em;
        shape-outside: url(img/025/cardinal.svg);
      }

      .bluejay {
        color: #00508b;
        margin-right: 0;
        float: right;
        shape-margin: 2em;
        shape-outside: url(img/025/bluejay.svg);
      }

      .bluejay svg {
        max-width: 30vw;
      }

      article p.standfirst {
        font-weight: 700;
        font-family: 'Playfair Display', serif;
        font-size: var(--font-size-large);
        color: #f5a622;
        line-height: 1.2;
      }

      aside {
        grid-area: aside;
      }

      footer {
        grid-area: footer;
      }

    </style>