Как сделать адаптивным(внутри flex) изображение, спозиционированное абсолютно с псевдоэлементом-border?

Question

[alexeeey_kuznetsov]

Здравствуйте!
Необходимо чтобы изображение внутри flex-элемента, спозиционированное абсолютно было адаптивным и уменьшалось с изменением ширины само и вместе с ::before.

Ссылка на CodePen:
https://codepen.io/alexeeey_kuznetsov/pen/LvdbbY
Важно, чтобы внутри flex-элемента, потому что на мобильных оно уйдет под правую сторону( для этого order хотел использовать). Но с абсолютным позиционированием ступор.
Натыкал слишком много контейнеров по моему мнению.
Жду помощи.
Заранее спасибо за ответ!

Comments

[Ankhena]

Абсолютам плевать на родительский флекс.
Задавайте размеры картинки в % или vw.

[alexeeey_kuznetsov]

Ankhena, Именно для картинки или блока-родителя задавать?
У меня почему-то не получилось для изображения ::before задать. Поэтому здесь полно блоков, и много где задана ширина.

[Ankhena]

alexeeey_kuznetsov, потому что тег img одиночный, ::before в него некуда запихивать.