419 lines
6.1 KiB
CSS
419 lines
6.1 KiB
CSS
.easy {
|
|
margin-bottom: 162px;
|
|
}
|
|
|
|
@media (min-width: 1720px) {
|
|
.easy {
|
|
margin-bottom: 180px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1304.98px) {
|
|
.easy {
|
|
margin-bottom: 140px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 991.98px) {
|
|
.easy {
|
|
margin-bottom: 121px;
|
|
}
|
|
}
|
|
|
|
.easy .title {
|
|
max-width: 55%;
|
|
margin-bottom: 21px;
|
|
}
|
|
|
|
@media (min-width: 1720px) {
|
|
.easy .title {
|
|
max-width: 45%;
|
|
margin-bottom: 23px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 991.98px) {
|
|
.easy .title {
|
|
max-width: 75%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.easy .title {
|
|
max-width: 95%;
|
|
margin-bottom: 30px;
|
|
}
|
|
}
|
|
|
|
.easy .subtitle {
|
|
margin-bottom: 41px;
|
|
}
|
|
|
|
@media (min-width: 1720px) {
|
|
.easy .subtitle {
|
|
margin-bottom: 59px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.easy .subtitle {
|
|
max-width: 90%;
|
|
margin: 0 auto 23px;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1304.98px) {
|
|
.easy__grid {
|
|
grid-column-gap: 69px;
|
|
grid-template-rows: repeat(2, minmax(172px, auto));
|
|
margin-bottom: 41px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 991.98px) {
|
|
.easy__grid {
|
|
display: block;
|
|
margin-bottom: 37px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.easy__grid {
|
|
margin-bottom: 40px;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
padding-top: 31px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1304.98px) {
|
|
.easy__item--fir {
|
|
margin-right: 13px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 991.98px) {
|
|
.easy__item--fir {
|
|
padding-top: 17px;
|
|
margin-right: 0;
|
|
margin-bottom: 49px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.easy__item--fir {
|
|
margin-bottom: 42px;
|
|
}
|
|
}
|
|
|
|
.easy__item--fir p {
|
|
width: 93%;
|
|
margin-bottom: 29px;
|
|
}
|
|
|
|
@media (min-width: 1720px) {
|
|
.easy__item--fir p {
|
|
width: 89%;
|
|
margin-bottom: 53px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 991.98px) {
|
|
.easy__item--fir p {
|
|
max-width: 78%;
|
|
}
|
|
}
|
|
|
|
.easy__item--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 (min-width: 1720px) {
|
|
.easy__item--sec {
|
|
padding-left: 15px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 991.98px) {
|
|
.easy__item--sec {
|
|
padding-top: 35px;
|
|
padding-bottom: 37px;
|
|
margin-bottom: 46px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.easy__item--sec {
|
|
display: block;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
margin-bottom: 49px;
|
|
}
|
|
}
|
|
|
|
.easy__item--sec img {
|
|
margin-bottom: -10px;
|
|
margin-right: -5px;
|
|
max-width: 50.1%;
|
|
}
|
|
|
|
@media (min-width: 1720px) {
|
|
.easy__item--sec img {
|
|
max-width: 53%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1304.98px) {
|
|
.easy__item--sec img {
|
|
max-width: 42%;
|
|
margin-bottom: -4px;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 991.98px) {
|
|
.easy__item--sec img {
|
|
margin-right: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.easy__item--sec img {
|
|
max-width: 104%;
|
|
position: relative;
|
|
left: -6px;
|
|
top: -4px;
|
|
}
|
|
}
|
|
|
|
.easy__item--sec p {
|
|
margin-bottom: 0;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.easy__item--sec p {
|
|
margin-bottom: 22px;
|
|
}
|
|
}
|
|
|
|
.easy__item--thr {
|
|
grid-area: c;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 0;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
@media (min-width: 1720px) {
|
|
.easy__item--thr {
|
|
padding-left: 15px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 991.98px) {
|
|
.easy__item--thr {
|
|
padding-top: 42px;
|
|
padding-bottom: 46px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.easy__item--thr {
|
|
display: block;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.easy__item--thr .img {
|
|
margin-bottom: -10px;
|
|
margin-right: 24px;
|
|
max-width: 80%;
|
|
}
|
|
|
|
@media (max-width: 1279.98px) {
|
|
.easy__item--thr .img {
|
|
max-width: 35%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1304.98px) {
|
|
.easy__item--thr .img {
|
|
margin-right: 2px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 991.98px) {
|
|
.easy__item--thr .img {
|
|
margin-right: 0;
|
|
max-width: 34%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.easy__item--thr .img img {
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
.easy__item--thr p {
|
|
max-width: 50%;
|
|
margin-bottom: 0;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
@media (max-width: 991.98px) {
|
|
.easy__item--thr p {
|
|
max-width: 60%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.easy__item--thr p {
|
|
margin-bottom: 22px;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1304.98px) {
|
|
.easy__arrow {
|
|
scale: 0.8;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 991.98px) {
|
|
.easy__arrow {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.easy__arrow--fir {
|
|
top: 46%;
|
|
right: 101%;
|
|
}
|
|
|
|
@media (min-width: 1720px) {
|
|
.easy__arrow--fir {
|
|
right: 105%;
|
|
top: 34%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1304.98px) {
|
|
.easy__arrow--fir {
|
|
top: 48%;
|
|
}
|
|
}
|
|
|
|
.easy__arrow--sec {
|
|
top: 117%;
|
|
left: 30%;
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
@media (min-width: 1720px) {
|
|
.easy__arrow--sec {
|
|
left: 45%;
|
|
top: 124%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1304.98px) {
|
|
.easy__arrow--sec {
|
|
left: 38%;
|
|
}
|
|
}
|
|
|
|
.easy__btn {
|
|
margin-top: -21px;
|
|
}
|
|
|
|
@media (max-width: 1304.98px) {
|
|
.easy__btn {
|
|
margin-top: -20px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 991.98px) {
|
|
.easy__btn {
|
|
margin-top: -19px;
|
|
padding-left: 54px;
|
|
padding-right: 54px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.easy__btn {
|
|
padding-left: 50px;
|
|
padding-right: 50px;
|
|
margin-top: -8px;
|
|
max-width: 100%;
|
|
}
|
|
}
|