Андрей Ларионов / rekamore.su

Blame view

public/scss/blocks/_info.scss 1.54 KB
edit raw normal view history
bdd23ce34   Андрей Ларионов   На сервер. Правки 
1
2
3
 
  .info {
  	position: relative;
  	overflow: hidden;
1c6078a15   Андрей Ларионов   Обновление от вос... 
4
5
6
 
  	@media (min-width: $desktop) {
  		margin-bottom: -25px;
  	}
bdd23ce34   Андрей Ларионов   На сервер. Правки 
7
8
9
10
 
  	&__pic {
  		display: none;
  		z-index: 1;
  		position: absolute;
1c6078a15   Андрей Ларионов   Обновление от вос... 
11
 
  		top: 0;
bdd23ce34   Андрей Ларионов   На сервер. Правки 
12
13
14
15
16
17
18
19
20
 
  		left: 50%;
  		height: 100%;
  		margin-left: 130px;
  		@media (min-width: $laptop) {
  			display: block;
  		}
  		@media (min-width: $desktop) {
  			width: 610px;
  			height: auto;
1c6078a15   Андрей Ларионов   Обновление от вос... 
21
 
  			margin-left: 10px;
bdd23ce34   Андрей Ларионов   На сервер. Правки 
22
23
24
25
26
27
28
29
 
  		}
  	}
  	&__body {
  		z-index: 2;
  		position: relative;
  		display: flex;
  		flex-direction: column;
  		@media (min-width: $desktop) {
1c6078a15   Андрей Ларионов   Обновление от вос... 
30
31
 
  			padding-top: 100px;
  			min-height: 600px;
bdd23ce34   Андрей Ларионов   На сервер. Правки 
32
33
34
35
36
37
38
39
40
 
  		}
  	}
  	&__title {
  		@media (min-width: $desktop) {
  			max-width: 520px;
  			line-height: 1;
  		}
  	}
  	&__item {
1c6078a15   Андрей Ларионов   Обновление от вос... 
41
 
  		margin-top: 20px;
bdd23ce34   Андрей Ларионов   На сервер. Правки 
42
43
44
45
46
47
48
49
 
  		display: flex;
  		flex-direction: column;
  		gap: 20px;
  		@media (min-width: $laptop) {
  			max-width: 610px;
  		}
  	}
  	&__item + &__item {
1c6078a15   Андрей Ларионов   Обновление от вос... 
50
 
  		margin-top: 60px;
bdd23ce34   Андрей Ларионов   На сервер. Правки 
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
 
  	}
  	&__text {
  		color: #6b6c6d;
  		font-size: 13px;
  		line-height: 1.4;
  		@media (min-width: $tablet) {
  			font-size: 16px;
  		}
  		@media (min-width: $desktop) {
  			font-size: 18px;
  		}
  	}
  	&__link {
  		border-radius: 8px;
  		display: flex;
  		justify-content: center;
  		align-items: center;
  		line-height: 1;
  		height: 40px;
  		font-size: 12px;
  		font-weight: 700;
  		gap: 8px;
  		color: $white;
  		background: $green;
  		&:hover {
  			filter: grayscale(50%);
  		}
  		@media (min-width: $tablet) {
  			height: 44px;
  			font-size: 16px;
  			gap: 10px;
  			max-width: 300px;
  		}
  		@media (min-width: $laptop) {
  			max-width: 210px;
  		}
  		svg {
  			width: 16px;
  			height: 16px;
  			@media (min-width: $tablet) {
  				width: 20px;
  				height: 20px;
  			}
  		}
  	}
  }