.values-block {
  position: relative;
  margin: 100px 0;

  @include sm {
    margin: 60px 0;
  }

  &__wrapper {
    width: 100%;
    max-width: $max-width;
    padding: 0 $gutter;
    margin: 0 auto;

    @include mdx {
      & > div {
        display: flex;
      }
    }

    @include md {
      & > div {
        display: block;
      }
    }
  }

  &__line1 {
    display: flex;
    align-items: flex-start;

    @include mdx {
      display: block;
      width: calc(100% / 3 * 2);
    }

    @include md {
      width: 100%;
      display: block;
    }
  }

  &__long-text {
    width: 50%;
    padding: 90px;
    color: $primary-color;
    margin-bottom: 260px;

    @include mdx {
      width: 150%;
      margin-bottom: -25px;
      padding-top: 0;
    }

    @include md {
      width: 100%;
    }

    @include sm {
      padding: 0 0 40px;
    }

    h2 {
      color: inherit;
      margin: 0;

      @include sm {
        font-size: 2.7rem;
        line-height: 3.3rem;
      }
    }

    p {
      font-size: 2.1rem;
      margin: 2.4rem 0;

      @include sm {
        font-size: 1.8rem;
        margin: 1.6rem 0;
      }
    }
  }

  .value-box {
    position: relative;
    width: 50%;
    flex-shrink: 0;

    &::before {
      content: '';
      display: block;
      padding-top: 100%;
    }

    @include sm {
      width: 100%;

      &.value-box--text::before {
        display: none;
      }
    }

    &__inner {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 20px 40px;
    }

    &.value-box--text .value-box__inner {
      @include sm {
        position: relative;
        padding: 40px 24px;
      }
    }

    &__topic {
      font-weight: 500;
      font-size: 1.8rem;
      line-height: 2.2rem;
      letter-spacing: 3px;
      text-transform: uppercase;
      margin-bottom: 24px;

      @include lg {
        margin-bottom: 1.6rem;
      }

      @include sm {
        font-size: 1.02rem;
        line-height: 1.2rem;
        letter-spacing: 1.7px;
      }
    }

    &__value {
      font-size: 3.6rem;
      line-height: 4.5rem;
      font-weight: 700;

      @include lg {
        font-size: 2.6rem;
        line-height: 3.5rem;
      }

      @include sm {
        font-size: 1.97rem;
        line-height: 2.5rem;
      }
    }

    img {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      object-fit: cover;
    }
  }

  &__right-boxes {
    display: flex;
    width: 50%;
    flex-wrap: wrap;
    flex-shrink: 0;

    @include mdx {
      width: 100%;
    }

    @include md {
      max-width: 600px;
      margin: auto;
    }

    @include sm {
      display: block;
    }

    .value-box:first-child {
      margin-left: 20%;

      @include md {
        margin-left: 0;
        margin-right: 50%;
      }

      @include sm {
        margin: 0;
      }
    }
  }

  &__left-boxes {
    display: flex;
    width: 50%;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    align-items: flex-start;

    @include mdx {
      width: 100%;
      flex-direction: row;
    }

    @include md {
      flex-direction: row-reverse;
      margin: auto;
      max-width: 600px;
    }

    > .value-box {
      margin-top: 10%;

      @include mdx {
        display: none;
      }

      @include md {
        display: block;
        margin-top: 0;
      }
    }
  }

  &__left-column {
    width: 50%;
    margin-top: -10%;

    @include mdx {
      width: 100%;
    }

    @include md {
      width: 50%;
      margin-top: 0;
    }

    @include sm {
      width: 100%;
    }

    .value-box {
      width: 100%;
    }
  }

  &__line2 {
    margin-top: -25%;

    @include mdx {
      width: calc(100% / 3);
      margin-top: 100%;
    }

    @include md {
      width: 100%;
      margin-top: 0;
    }
  }
}