Как обычно, выручил Stack Overflow. Судя по всему, это известный баг IE, который не дает нормально обрабатывать значение box-shadow (особенно когда оно анимировано). Один из обходных вариантов (ссылка ниже) - банально поместить псевдоэлемент с совпадающим цветом фона за область, где этот баг проявляется. Если фон сложный - все равно будет некрасиво, думается мне, но мне повезло.
https://stackoverflow.com/questions/22161981/remov...

Попробуйте
display: inline;
для тега p

<picture>
      <source type="image/webp" srcset="/assets/images/preview-tablet.webp, /assets/images/preview-tablet-retina.webp 2x" media="(max-width: 768px)">
      <source type="image/webp" srcset="/assets/images/preview-desktop.webp, /assets/images/preview-desktop-retina.webp 2x" media="(min-width: 769px)">
      <source type="image/webp" srcset="xxx.webp 1x, xxx.webp 2x">
      <source srcset="/assets/images/preview-tablet.jpg, /assets/images/preview-tablet-retina.jpg 2x" media="(max-width: 768px)">
      <source srcset="/assets/images/preview-desktop.jpg, /assets/images/preview-desktop-retina.jpg 2x" media="(min-width: 769px)">
      <img alt="preview">
</picture>

То же самое, только про webp написать в начале и не забыть добавить атрибут type="image/webp". Браузеры, которые ничего не поймут, пойдут дальше и увидят jpg.

Если я правильно понял суть вопроса, можно каждой строке задать display: flex (можно и всем, но тогда дальнейшая настройка чуть сложнее), элементам-дивам - flex-basis 100%, ну и прочего по вкусу. Остальное флексбокс сделает сам:
https://codepen.io/schegol/pen/WNbNdrR

UPD. flex-shrink: 0 картинке еще забыл.

.start{
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Рекомендую запомнить метод, если продолжите заниматься версткой, этим трюком придется пользоваться тысячи раз.

UPD. Только не к .start это надо применить, а к ссылке-родителю. Не заметил, что два img тут участвует.