Looks fine to me. I'm not clear if there are any gotchas or issues with using <div> tags, we just need to make sure they're on separate lines from any markdown formatting as far as I know. (If there's anything else we should watch out for, happy to hear it. :) )

So just to make sure I understand what this does, wrapping a pair of buttons in <div class="double"> is what makes them render side by side?

Ohh I'm sorry, I must have missed your comment here @sanscontext.

Well, that's right - I couldn't place them next to each other without any wrapper element. CSS display property needs to be attached to the "parent element" and that's why I had to add another HTML tag. I know it doesn't look nice :<

Maybe I'll show you a different solution 🤔
It's possible to create something like this:

{% include components/double-buttons.html
  href1="/connections/sources/catalog/"
  icon1="media/icon-academy.svg"
  title1="Sources Catalog"
  content1="Lorem ipsum dolor sit amet consectetur, adipisicing elit."
  variant1="related" 
  href2="/connections/sources/catalog/"
  icon2="media/icon-academy.svg"
  title2="Segment"
  content2="Lorem ipsum dolor  sit amet consectetur, adipisicing elit."
%}

inside the components/double-buttons would be that <div class="double then.
but I don't think it's easy to use 😅

However, it's totally up to you now. I'm not going to use this element that much.
Just let me know what would be the best option for you.

Let's keep it with the div tag! I think that's much easier to use - was just making sure I understood what was built in case there were questions later. :)

Gah, sorry, I thought I merged this! Doing that now.