1.card {
2  width: 210px;
3  height: 254px;
4  border-radius: 4px;
5  background: #212121;
6  display: flex;
7  gap: 5px;
8  padding: .4em;
9}
10
11.card p {
12  height: 100%;
13  flex: 1;
14  overflow: hidden;
15  cursor: pointer;
16  border-radius: 2px;
17  transition: all .5s;
18  background: #212121;
19  border: 1px solid #ff5a91;
20  display: flex;
21  justify-content: center;
22  align-items: center;
23}
24
25.card p:hover {
26  flex: 4;
27}
28
29.card p span {
30  min-width: 14em;
31  padding: .5em;
32  text-align: center;
33  transform: rotate(-90deg);
34  transition: all .5s;
35  text-transform: uppercase;
36  color: #ff568e;
37  letter-spacing: .1em;
38}
39
40.card p:hover span {
41  transform: rotate(0);
42}