ux_ui_designer

1
.about {
2
  background-image: url("../../assets/images/Background.png");
3
  background-size: cover;
4
  background-repeat: no-repeat;
5
  background-position: center;
6
  border-radius: 20px;
7
  &__wrapper {
8
    display: grid;
9
    grid-template-columns: 1fr 1fr;
10
    align-items: self-start;
11
    max-width: 1400px;
12
    margin: 0 auto;
13
    padding: 100px 100px;
14
    @media screen and (max-width: 987px) {
15
      display: block;
16
    }
17
    @media screen and (max-width: 659px) {
18
      padding: 75px 16px;
19
    }
20
  }
21
  &__text {
22
    text-align: left;
23
    border-left: 1px solid #eda424;
24
    max-width: 500px;
25
    font-size: 17px;
26
    padding-left: 16px;
27
    color: #1a1b1d;
28
    font-weight: 100;
29
  }
30
  &__photo {
31
    text-align: end;
32
    padding-bottom: 50px;
33
    padding-left: 50px;
34

35
    @media screen and (max-width: 987px) {
36
      display: block;
37
      padding-top: 50px;
38
    }
39
    @media screen and (max-width: 659px) {
40
      padding-bottom: 32px;
41
      padding-left: 32px;
42
      padding-top: 32px;
43
    }
44
    @media screen and (max-width: 525px) {
45
      text-align: center;
46
      padding-left: 0;
47
    }
48
    @media screen and (max-width: 414px) {
49
      padding-bottom: 16px;
50
      padding-left: 16px;
51
      padding-top: 16px;
52
    }
53
  }
54

55
  &__img {
56
    max-width: 100%;
57
    @media screen and (max-width: 525px) {
58
      width: 100%;
59
    }
60
  }
61
}
62