1 body{

2 justify-content: center;
3 align-items: center;
4 display: flex;
5 min-height: 100vh;
6 background: linear-gradient(45deg, #333, #bb02ff);
7 background-attachment: fixed;
8 }
9 .container{
10 position: relative;
11 width: 1150px;
12 padding: 20px;
13 display: flex;
14 justify-content: center;
15 align-items: center;
16 flex-wrap: wrap;
17 }
18 img{
19 width: 100%;
20 }
21 .container .card{
22 position: relative;
23 width: 300px;
24 height: 420px;
25 border-radius: 10px;
26 box-shadow: 0px 15px 25px rgba(0, 0, 0, 2);
27 background: #fff;
28 margin: 20px;
29 overflow: hidden;
30 transition: .5s;
31 }
32 .container .card:hover{
33 filter: blur(0);
34 transform: scale(1.1);
35 opacity: 1;
36 }
37 .container .card .circle{
38 position: relative;
39 width: 100%;
40 height: 100%;
41 background: #000;
42 clip-path: circle(180px at center 0);
43 }
44 .container .card .content{
45 position: absolute;
46 bottom: 10px;
47 page-break-after: 20px;
48 padding: 20px;
49 text-align: center;
50 }
51 .content p{
52 color: #666;
53 text-align: justify;
54 font-size: 15px;
55 }
56 .content a{
57 position: relative;
58 display: inline-block;
59 background: #000;
60 padding: 10px 20px;
61 border-radius: 40px;
62 text-decoration: none;
63 }
64