1.category-catalog-wrap {
2 margin-bottom: 20px;
3}
4
5.category-wall .category-card {
6 padding: 20px;
7 border-radius: 8px;
8 transition: all .3s ease-in-out;
9 background: #f3f5f7;
10 position: relative;
11 overflow: hidden;
12 height: 100%;
13}
14
15.category-wall .category-cards {
16 display: flex;
17}
18
19.category-wall .category-card:hover {
20 background-color: #fff;
21
-webkit-box-shadow: 0 7px 14px 0 rgb(0 0 0 / 10%);
22 box-shadow: 0 7px 14px 0 rgb(0 0 0 / 10%);
23}
24
25.category-blocks {
26 display: flex;
27 flex-wrap: wrap;
28 margin: 0 -10px
29}
30
31.category-catalog-wrap {
32 width: 50%;
33 padding: 0 10px;
34}
35
36@media (min-width: 768px) {
37 .category-catalog-wrap {
38 width: 50%;
39 }
40 .category-catalog-wrap.is-columns {
41 width: 100%;
42 }
43}
44
45@media (min-width: 1200px) {
46 .category-catalog-wrap.not-column {
47 width: 25%;
48 }
49}
50
51.category-wall .category-name {
52 font-weight: 700;
53 font-size: 15px;
54 color: #000;
55 display: block;
56 text-transform: uppercase;
57 transition: all .25s;
58}
59@media (max-width: 768px) {
60 .category-wall .category-name {
61 font-weight: 600;
62 font-size: 12px;
63 color: #000;
64 display: block;
65 text-transform: uppercase;
66 transition: all .25s;
67 }
68}
69.category-wall .category-list a {
70 display: block;
71 font-size: 13px;
72 margin-bottom: 4px;
73 color: #333;
74 transition: all .25s;
75}
76
77.category-wall .category-name:hover,
78.category-wall .category-name:focus,
79.category-wall .category-list a:focus:not(.category-count),
80.category-wall .category-list a:hover:not(.category-count) {
81 color: #559cff;
82}
83
84.category-wall .category-image {
85 order: 1
86}
87
88.category-body {
89 flex: 1;
90 flex-basis: auto;
91 min-width: 50%;
92}
93
94.category-wall .category-img-link img {
95 mix-blend-mode: multiply;
96}
97
98.category-wall a.category-count {
99 color: #ffffff;
100 display: inline-block;
101 background: #41c962;
102 border-radius: 25px;
103 padding: 2px 7px;
104
-webkit-box-shadow: 0 4px 18px 0 rgb(90 210 119 / 50%);
105 box-shadow: 0 4px 18px 0 rgb(90 210 119 / 50%);
106 margin-top: 12px;
107 text-shadow: 0 1px rgb(23 187 62 / 22%);
108}
109
110.category-list {
111 margin-top: 20px;
112}