После поворота градиента его надо еще двигать через translate. В вашем случае еще можно применить transform-origin . Почитать про трансформы и координаты в свг градиентах.
Есть подозрение, что у вас просто совпадают стили для :hover и :focus, т.к. ховер не может примениться к кнопке, если курсор не на ней. А вот фокус - вполне. Как пример https://jsfiddle.net/ad7qoxsm/.
Вполне ожидаемое поведение. Вы разметили таким образом, что у вас получилось по два одинаковых контейнера, которые имеют одинаковое положение на странице: "name const". И тут нет значения, что в html они расположены через один. Чтобы получить таблицу из этой разметки вам как раз не очень-то и нужен grid-template-areas, достаточно разметить положение колонок и строк. Вот так.
