Experiments page.
[wolnelektury.git] / src / wolnelektury / static / 2022 / styles / layout / _quotes.scss
1 .l-quotes {
2   width: 100%;
3   max-width: 1140px;
4   margin-top: 58px;
5   position: relative;
6   overflow: hidden;
7   padding-bottom: 40px;
8
9   @include rwd(tablet) {
10     margin-top: 24px;
11   }
12
13   &:after {
14     content: "";
15     display: block;
16     pointer-events: none;
17     background: url("../images/quotes-slider-bg-right.svg") center no-repeat;
18     width: 170px;
19     height: 407px;
20     position: absolute;
21     right: -150px;
22     top: 0;
23     z-index: $middle-layer;
24
25     @include rwd(tablet) {
26       display: none;
27     }
28   }
29
30   &:before {
31     content: "";
32     display: block;
33     pointer-events: none;
34     background: url("../images/quotes-slider-bg-left.svg") center no-repeat;
35     width: 170px;
36     height: 407px;
37     position: absolute;
38     left: -150px;
39     top: 0;
40     z-index: $middle-layer;
41
42     @include rwd(tablet) {
43       display: none;
44     }
45   }
46
47   .slick-dots {
48     bottom: 0;
49     li button:before {
50       border: 1px solid #007880;
51     }
52   }
53 }
54
55 .l-quotes__item {
56   outline: 0;
57   background: #E1F1F2;
58   border-radius: 10px;
59   width: 558px;
60   margin-top: 50px;
61   margin-left: 32px;
62   margin-right: 32px;
63   padding-left: 32px;
64   padding-right: 32px;
65   padding-bottom: 32px;
66
67   @include rwd(tablet) {
68     margin-right: 0;
69     margin-left: 0;
70   }
71
72   img {
73     margin: 0 auto;
74     border-radius: 50%;
75     overflow: hidden;
76     font-size: 0;
77     margin-top: -50px;
78
79     @include rwd(tablet) {
80       width: 48px;
81       height: 48px;
82       margin-top: -24px;
83     }
84   }
85
86   h4 {
87     margin-top: 10px;
88     font-weight: $semibold;
89     @include font-size(25px);
90     line-height: 140%;
91     text-align: center;
92     letter-spacing: -0.01em;
93     color: #474747;
94
95     @include rwd(tablet) {
96       margin-top: 5px;
97       @include font-size(14px);
98     }
99   }
100
101   p {
102     margin-top: 24px;
103     font-style: italic;
104     font-weight: $regular;
105     @include font-size(26px);
106     line-height: 140%;
107     text-align: center;
108     letter-spacing: -0.02em;
109     color: #083F4D;
110
111     @include rwd(tablet) {
112       margin-top: 12px;
113       @include font-size(20px);
114     }
115   }
116 }