asymmetrical padding in figures produced via bootstrap grid + figure.liquid

[renauddetry]

Have you checked that your issue isn't already filed?

• [X] I read through FAQ and searched through the past issues, none of which addressed my issue.
• [X] Yes, I have checked that this issue isn't already filed.

Bug description

asymmetrical padding in figures produced via bootstrap grid + figure.liquid

How to reproduce the bug

1. Navigate to https://renauddetry.github.io/al-folio/projects/2_project/
2. You'll notice vertical and horizontal asymmetries in the space that surrounds images (also illustrated in screenshots below).
3. Paddings change non proportionally when shrinking the viewport. See screenshots below for illustration.

The only functional change of the fork above is the addition of the following styling, to make the space around images easier to see:

.row {
  border: 1px solid red;
}

.mt-3 {
  border: 1px solid green;
}

The following screenshots illustrate the problem on a wide window, narrower window, and even narrower window.

Wide window

Narrower window

Even narrower window

It's surprising that Bootstrap produces those flaky layouts. The following hack fixes the padding issues discussed above (but probably introduce new problems elsewhere):

• Remove the Bootstrap grid <div>'s around figure.liquid calls
• wrap figure.liquid with a div of class figure-r
• import the following styles after other imports:

figure {
    all: initial;
}

.figure-r {
    margin-bottom: 1rem;
}

.profile {
    margin-bottom: 1rem;
}

Error messages and logs

See screenshots above

What operating system are you using?

Mac

Where are you seeing the problem on?

Deployed site

More info

The problem seems to be browser-agnostic