morty

1
.card--inner {
2
  display: grid;
3
  grid-template-columns: 1fr 1fr 1fr;
4
  justify-items: center;
5

6
  gap: 30px;
7

8
  .card-images {
9
    height: 300px;
10
    background-color: #000;
11
    cursor: pointer;
12

13
    img {
14
      transition: all 0.2s;
15
      &:hover {
16
        opacity: 0.6;
17
      }
18
    }
19
  }
20

21
  .card-info {
22
    display: flex;
23
    flex-direction: column;
24

25
    margin-top: 10px;
26
    gap: 10px;
27
    align-items: center;
28

29
    .card-name {
30
      margin: 0;
31
    }
32

33
    .card-status {
34
      margin: 0;
35
    }
36
  }
37
}
38

39
.load-more {
40
  display: flex;
41
  margin: 50px auto 0;
42
  font-size: 18px;
43
  padding: 5px 10px 5px 10px;
44
  border-radius: 5px;
45
  border: none;
46
  background-color: #ffff32;
47
  cursor: pointer;
48
  color: #000;
49
  transition: all 0.2s;
50

51
  &:hover {
52
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
53
  }
54
}
55