.easy { margin-bottom: 162px; @media (min-width: 1720px) { margin-bottom: 180px; } @media (max-width: 1304.98px) { margin-bottom: 142px; } @media (max-width: 991.98px) { margin-bottom: 121px; } .title { max-width: 55%; margin-bottom: 21px; @media (min-width: 1720px) { max-width: 45%; margin-bottom: 23px; } @media (max-width: 991.98px) { max-width: 75%; } } .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; @media (min-width: 1720px) { grid-column-gap: 147px; grid-template-rows: repeat(2, minmax(245px, auto)); grid-row-gap: 136px; margin-bottom: 63px; } @media (max-width: 1304.98px) { grid-column-gap: 69px; grid-template-rows: repeat(2, minmax(172px, auto)); margin-bottom: 41px; } @media (max-width: 991.98px) { display: block; margin-bottom: 40px; } } &__item { border-radius: 30px; background-color: var(--color-grey); /*background-color: #a72525;*/ text-align: left; padding: 21px; box-shadow: var(--box-shadow-primary); &--fir { grid-area: a; margin-right: 60px; padding-bottom: 0; @media (min-width: 1720px) { margin-right: -10px; margin-left: 7px; padding-top: 31px; } @media (max-width: 1304.98px) { margin-right: 13px; } @media (max-width: 991.98px) { padding-top: 17px; margin-right: 0; margin-bottom: 43px; } p { width: 93%; margin-bottom: 29px; @media (min-width: 1720px) { width: 89%; margin-bottom: 53px; } } } &--sec { grid-area: b; position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 0; padding-top: 0; padding-bottom: 0; @media (max-width: 991.98px) { padding-top: 35px; padding-bottom: 37px; margin-bottom: 39px; } img { margin-bottom: -10px; margin-right: -5px; max-width: 50.1%; @media (min-width: 1720px) { margin-right: -12px; } @media (max-width: 1304.98px) { max-width: 43.1%; } @media (max-width: 991.98px) { margin-right: 0; margin-bottom: 0; } } p { margin-bottom: 0; padding-top: 0; padding-bottom: 0; } } &--thr { grid-area: c; display: flex; align-items: center; justify-content: space-between; margin-bottom: 0; padding-top: 0; padding-bottom: 0; //background-color: #00a420; @media (max-width: 991.98px) { padding-top: 42px; padding-bottom: 46px; } .img { margin-bottom: -10px; margin-right: 24px; max-width: 80%; @media (max-width: 1279.98px) { max-width: 35%; } @media (max-width: 1304.98px) { margin-right: 2px; } @media (max-width: 991.98px) { margin-right: 0; max-width: 34%; } } p { max-width: 50%; margin-bottom: 0; padding-top: 0; padding-bottom: 0; @media (max-width: 991.98px) { max-width: 60%; } } } } &__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; } @media (max-width: 1304.98px) { scale: 0.8; } @media (max-width: 991.98px) { display: none; } &--fir { top: 46%; right: 101%; @media (min-width: 1720px) { right: 104%; top: 34%; } @media (max-width: 1304.98px) { top: 48%; } } &--sec { top: 117%; left: 30%; transform: rotate(90deg); @media (min-width: 1720px) { left: 46%; top: 124%; } @media (max-width: 1304.98px) { left: 38%; } } } &__btn { margin-top: -21px; @media (max-width: 991.98px) { margin-top: -26px; padding-left: 54px; padding-right: 54px; } } }