.solution {
  @extend %container;

  display: flex;
  justify-content: space-between;
  max-width: 1075px;
  margin-top: 87px;
  padding: 78px 30px;

  &:first-of-type {
    margin-top: 115px;
  }

  &:last-of-type {
    margin-bottom: 115px;
  }

  > * {
    flex-shrink: 0;
    width: 50%;
  }

  picture {
    display: flex;
    align-items: center;

    img {
      height: 100%;
      object-fit: contain;
      object-position: center;
    }
  }

  &--reverse {
    .solution__column {
      order: -1;
      max-width: 420px;
      padding-right: 0;
      padding-left: 6px;
    }
  }
}

.solution__column {
  max-width: 335px;

  &.text-article {
    h3 {
      margin-top: 0;
      margin-bottom: 28px;
      font-weight: 700;
      font-size: 30px;
    }

    p {
      padding-left: 7px;
    }

    ul {
      margin-top: 33px;
      padding: 0 0 0 12px;

      li {
        padding-left: 30px;
      }
    }
  }
}

@include media('tablet-m') {
  .solution {
    picture {
      width: 47%;
    }
  }
}

@include media('tablet-s') {
  .solution {
    flex-wrap: wrap;
    margin-top: 55px;
    padding: 0;

    &--reverse {
      .solution__column {
        order: 1;
      }
    }

    picture {
      width: 111%;
    }

    &:first-of-type {
      margin-top: 47px;
    }

    &:last-of-type {
      margin-bottom: 20px;
    }
  }

  .solution__column {
    &.text-article {
      max-width: unset;
      width: 100%;
      padding: 53px 40px;

      h3 {
        margin-bottom: 8px;
        font-size: 22.5px;
        line-height: 25px;
        text-align: center;
      }

      p {
        font-size: 16px;
        line-height: 18px;
      }

      ul {
        margin-top: 37px;
        padding: 0 0 0 5px;

        li {
          padding-left: 24px;
          font-size: 16px;
          line-height: 18px;
        }
      }
    }
  }
}