webapp

1
.cards {
2
  padding: 4rem;
3
  background: #fff;
4
}
5

6
h1 {
7
  text-align: center;
8
}
9

10
.cards__container {
11
  display: flex;
12
  flex-flow: column;
13
  align-items: center;
14
  max-width: 1120px;
15
  width: 90%;
16
  margin: 0 auto;
17
}
18

19
.cards__wrapper {
20
  position: relative;
21
  margin: 50px 0 45px;
22
}
23

24
.cards__items {
25
  margin-bottom: 24px;
26
}
27

28
.cards__item {
29
  display: flex;
30
  flex: 1;
31
  margin: 0 1rem;
32
  border-radius: 10px;
33
}
34

35
.cards__item__link {
36
  display: flex;
37
  flex-flow: column;
38
  width: 100%;
39
  box-shadow: 0 6px 20px rgba(56, 125, 255, 0.17);
40
  -webkit-filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017));
41
  filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017));
42
  border-radius: 10px;
43
  overflow: hidden;
44
  text-decoration: none;
45
}
46

47
.cards__item__pic-wrap {
48
  position: relative;
49
  width: 100%;
50
  padding-top: 67%;
51
  overflow: hidden;
52
}
53

54
.fade-img {
55
  animation-name: fade-img;
56
  animation-duration: 2s;
57
}
58

59
.cards__item__pic-wrap::after {
60
  content: attr(data-category);
61
  position: absolute;
62
  bottom: 0;
63
  margin-left: 10px;
64
  padding: 6px 8px;
65
  max-width: calc((100%) - 60px);
66
  font-size: 12px;
67
  font-weight: 700;
68
  color: #fff;
69
  background-color: #1f98f4;
70
  box-sizing: border-box;
71
}
72

73
.cards__item__img {
74
  position: absolute;
75
  top: 0;
76
  right: 0;
77
  bottom: 0;
78
  left: 0;
79
  display: block;
80
  width: 100%;
81
  max-width: 100%;
82
  height: 100%;
83
  max-height: 100%;
84
  object-fit: cover;
85
  transition: all 0.2s linear;
86
}
87

88
.cards__item__img:hover {
89
  transform: scale(1.1);
90
}
91

92
.cards__item__info {
93
  padding: 20px 30px 30px;
94
}
95

96
.cards__item__text {
97
  color: #252e48;
98
  font-size: 18px;
99
  line-height: 24px;
100
}
101

102
@media only screen and (min-width: 1200px) {
103
  .content__blog__container {
104
    width: 84%;
105
  }
106
}
107

108
@media only screen and (min-width: 1024px) {
109
  .cards__items {
110
    display: flex;
111
  }
112
}
113

114
@media only screen and (max-width: 1024px) {
115
  .cards__item {
116
    margin-bottom: 2rem;
117
  }
118
}
119