sysadminix/tripwithbonus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

TRI-283: end adaptive 1920 + start header

Browse Source
This commit is contained in:
Artyom Pratsko
2024-11-19 00:25:47 +03:00
parent da6f47f439
commit 4996d02f71
36 changed files with 2118 additions and 384 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
styles/moover/easy.scss
View File

@@ -1,64 +1,148 @@
.easy {
margin-bottom: 162px;
}
.easy .title {
max-width: 55%;
margin-bottom: 21px;
}
@media (min-width: 1720px) {
margin-bottom: 180px;
}
.easy .subtitle {
margin-bottom: 41px;
}
.title {
max-width: 55%;
margin-bottom: 21px;
.easy__grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(2, minmax(186px, auto));
grid-template-areas:
@media (min-width: 1720px) {
max-width: 45%;
margin-bottom: 23px;
}
}
.subtitle {
margin-bottom: 41px;
@media (min-width: 1720px) {
margin-bottom: 59px;
}
}
&__grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(2, minmax(186px, auto));
grid-template-areas:
'a b'
'a c';
grid-column-gap: 20px;
grid-row-gap: 80px;
margin-bottom: 46px;
}
grid-column-gap: 20px;
grid-row-gap: 80px;
margin-bottom: 46px;
.easy__item {
border-radius: 30px;
background-color: var(--color-grey);
/*background-color: #a72525;*/
text-align: left;
padding: 21px;
box-shadow: var(--box-shadow-primary);
}
@media (min-width: 1720px) {
grid-column-gap: 147px;
grid-template-rows: repeat(2, minmax(245px, auto));
grid-row-gap: 136px;
margin-bottom: 63px;
}
}
.easy__item--fir {
grid-area: a;
margin-right: 60px;
padding-bottom: 0;
}
&__item {
border-radius: 30px;
background-color: var(--color-grey);
/*background-color: #a72525;*/
text-align: left;
padding: 21px;
box-shadow: var(--box-shadow-primary);
.easy__item--fir p {
width: 93%;
margin-bottom: 29px;
}
&--fir {
grid-area: a;
margin-right: 60px;
padding-bottom: 0;
.easy__item--sec img {
margin-bottom: -10px;
margin-right: -5px;
}
@media (min-width: 1720px) {
margin-right: -10px;
margin-left: 7px;
padding-top: 31px;
}
.easy__item--thr img {
margin-bottom: -10px;
margin-right: 24px;
}
p {
width: 93%;
margin-bottom: 29px;
.easy__item--sec {
grid-area: b;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
@media (min-width: 1720px) {
width: 89%;
margin-bottom: 53px;
}
}
}
&--thr {
grid-area: c;
display: flex;
align-items: center;
justify-content: space-between;
}
&--sec {
grid-area: b;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
img {
margin-bottom: -10px;
margin-right: -5px;
@media (min-width: 1720px) {
margin-right: -12px;
}
}
}
&--thr img {
margin-bottom: -10px;
margin-right: 24px;
}
&--thr p {
max-width: 50%;
}
}
&__arrow {
width: 68px;
height: 18px;
background-image: url("/static/img/svg/Arrow08.svg");
position: absolute;
z-index: 1;
@media (min-width: 1720px) {
scale: 1.4;
}
&--fir {
top: 46%;
right: 101%;
@media (min-width: 1720px) {
right: 104%;
top: 34%;
}
}
&--sec {
top: 117%;
left: 30%;
transform: rotate(90deg);
@media (min-width: 1720px) {
left: 46%;
top: 124%;
}
}
}
&__btn {
margin-top: -21px;
}
}
.easy__item--sec p,
@@ -69,37 +153,3 @@
padding-top: 0;
padding-bottom: 0;
}
.easy__item--thr {
grid-area: c;
display: flex;
align-items: center;
justify-content: space-between;
}
.easy__item--thr p {
max-width: 50%;
}
.easy__arrow {
width: 68px;
height: 18px;
background-image: url("/static/img/svg/Arrow08.svg");
position: absolute;
z-index: 1;
}
.easy__arrow--fir {
top: 46%;
right: 101%;
}
.easy__arrow--sec {
top: 117%;
left: 30%;
transform: rotate(90deg);
}
.easy__btn {
margin-top: -21px;
}