ReactJS

1
button {
2
    background: transparent;
3
    border: 0;
4
    padding: 0;
5
    cursor: pointer;
6
}
7

8
.card {
9
    position: relative;
10
    background-color: var(--white);
11
    border-radius: 7px;
12
    padding: 20px 20px 10px;
13
    display: flex;
14
    flex-flow: row wrap;
15
}
16

17
.card > * {
18
    flex: 1 1 100%;
19
}
20

21
.card > * + * {
22
    padding: 13px 0 0;
23
}
24

25
.card:hover h2 a, .card:focus-within h2 a {
26
    color: var(--orange);
27
}
28

29

30

31

32

33
.menuItemsList {
34
    padding: 0 20px;
35
}
36

37
.divider {
38
    height: 1px;
39
    width: 100%;
40
    background-color: var(--greyEC);
41
}
42

43

44

45
@media all and (min-width: 1024px) {
46
    .card {
47
        background-color: transparent;
48
        flex-flow: row nowrap;
49
        max-height: 107px;
50
        padding: 0 40px;
51
    }
52

53
    .card > * {
54
        flex: 0 0;
55
    }
56

57
    .card > * + * {
58
        padding: 0;
59
    }
60
}
61

62
@media all and (min-width: 1540px) {
63
    .card {
64
        padding: 20px 60px;
65
        max-height: 147px;
66
        cursor: pointer;
67
    }
68

69
    .card:hover, .card:focus-within {
70
        outline: 1px solid var(--greyD9);
71
    }
72

73

74
}
75