Андрей

Делал следующим образом: блоку, который надо обернуть, прописал стиль position: relative. И создал внутри этого блока div, с стилями:
position: absolute;
top: -2px;
left: -2px;
bottom: -2px;
right: -2px;//толщина бордера
border-radius: который нам нужен
background: градиент, который нам нужен.

flex-order

Смотрите 3д анимации

background-size Вам в помощь

вешайте ховер на film т.е.
film: hover .poster{
свойства;
}
То же самое с запуском анимации.

медиа запросы Вам в помощь

Стили подключаются у всех. Просто Ваш код, скорее всего, не кроссбраузерный, т.е. не все стили работают корректно в разных браузерах.