maccounter

1
.container {
2
  position: fixed;
3
  top: 0;
4
  width: 100vw;
5
  height: 100vh;
6
  background-color: var(--color-overlay);
7
  z-index: 999;
8
  transition: 0.2s;
9

10
  display: flex;
11
  align-items: center;
12
  justify-content: center;
13
}
14

15
.modal {
16
  transition: .2s;
17
  display: flex;
18
  flex-direction: column;
19

20
  padding: var(--size-padding-component);
21

22
  .header {
23
    font-size: var(--size-font-title-small);
24
    display: flex;
25
    align-items: center;
26
    justify-content: space-between;
27

28
    .title {
29
      margin-right: 60px;
30
    }
31

32
    .close {
33
      cursor: pointer;
34
      width: 24px;
35
      height: 24px;
36

37
      svg {
38
        width: 100%;
39
        height: 100%;
40
      }
41
    }
42
  }
43

44
  .body {
45
    display: flex;
46
    margin-top: 30px;
47
    align-items: center;
48

49
    .img {
50
      display: flex;
51
      align-items: center;
52
      justify-content: center;
53
      width: 80px;
54
      height: 80px;
55
      border-radius: 50%;
56
      border: 4px solid var(--color-main);
57
      overflow: hidden;
58
      margin-right: 30px;
59
    }
60

61
    .info {
62
      display: flex;
63
      flex-direction: column;
64
      font-size: var(--size-font-base);
65

66
      p:not(:last-child) {
67
        margin-bottom: 15px;
68
      }
69
    }
70
  }
71
}
72