tripwithbonus/styles/moover/easy.scss

.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;
    }
  }
}