173 lines
2.5 KiB
CSS
173 lines
2.5 KiB
CSS
.easy {
|
|
margin-bottom: 162px;
|
|
}
|
|
|
|
@media (min-width: 1720px) {
|
|
.easy {
|
|
margin-bottom: 180px;
|
|
}
|
|
}
|
|
|
|
.easy .title {
|
|
max-width: 55%;
|
|
margin-bottom: 21px;
|
|
}
|
|
|
|
@media (min-width: 1720px) {
|
|
.easy .title {
|
|
max-width: 45%;
|
|
margin-bottom: 23px;
|
|
}
|
|
}
|
|
|
|
.easy .subtitle {
|
|
margin-bottom: 41px;
|
|
}
|
|
|
|
@media (min-width: 1720px) {
|
|
.easy .subtitle {
|
|
margin-bottom: 59px;
|
|
}
|
|
}
|
|
|
|
.easy__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;
|
|
}
|
|
|
|
@media (min-width: 1720px) {
|
|
.easy__grid {
|
|
grid-column-gap: 147px;
|
|
grid-template-rows: repeat(2, minmax(245px, auto));
|
|
grid-row-gap: 136px;
|
|
margin-bottom: 63px;
|
|
}
|
|
}
|
|
|
|
.easy__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 {
|
|
grid-area: a;
|
|
margin-right: 60px;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
@media (min-width: 1720px) {
|
|
.easy__item--fir {
|
|
margin-right: -10px;
|
|
margin-left: 7px;
|
|
padding-top: 31px;
|
|
}
|
|
}
|
|
|
|
.easy__item--fir p {
|
|
width: 93%;
|
|
margin-bottom: 29px;
|
|
}
|
|
|
|
@media (min-width: 1720px) {
|
|
.easy__item--fir p {
|
|
width: 89%;
|
|
margin-bottom: 53px;
|
|
}
|
|
}
|
|
|
|
.easy__item--thr {
|
|
grid-area: c;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.easy__item--sec {
|
|
grid-area: b;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.easy__item--sec img {
|
|
margin-bottom: -10px;
|
|
margin-right: -5px;
|
|
}
|
|
|
|
@media (min-width: 1720px) {
|
|
.easy__item--sec img {
|
|
margin-right: -12px;
|
|
}
|
|
}
|
|
|
|
.easy__item--thr img {
|
|
margin-bottom: -10px;
|
|
margin-right: 24px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
@media (min-width: 1720px) {
|
|
.easy__arrow {
|
|
scale: 1.4;
|
|
}
|
|
}
|
|
|
|
.easy__arrow--fir {
|
|
top: 46%;
|
|
right: 101%;
|
|
}
|
|
|
|
@media (min-width: 1720px) {
|
|
.easy__arrow--fir {
|
|
right: 104%;
|
|
top: 34%;
|
|
}
|
|
}
|
|
|
|
.easy__arrow--sec {
|
|
top: 117%;
|
|
left: 30%;
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
@media (min-width: 1720px) {
|
|
.easy__arrow--sec {
|
|
left: 46%;
|
|
top: 124%;
|
|
}
|
|
}
|
|
|
|
.easy__btn {
|
|
margin-top: -21px;
|
|
}
|
|
|
|
.easy__item--sec p,
|
|
.easy__item--thr p,
|
|
.easy__item--sec,
|
|
.easy__item--thr {
|
|
margin-bottom: 0;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|