.prosCons {
  @include min(tablet) {
    display: flex;
  }

  div {
    @include flex-direction(column);
    align-items: center;
    border-radius: var(--border-radius);
    background: white;
    margin-top: 4.3rem;
    padding: 3rem;

    @include max(mobile) {
      max-width: 45rem;
      margin: 4.3rem auto 1rem;
    }

    @include min(tablet) {
      width: 50%;
      padding: 4rem;
      margin-bottom: 1rem;
    }

    .icon {
      @include flex-align(center, center);
      border-radius: 50%;
      width: 9rem;
      height: 9rem;
      margin-top: -7.3rem;

      @include min(tablet) {
        margin-top: -8.2rem;
      }

      svg {
        fill: white;
      }
    }

    .title {
      color: var(--color-22);
      margin: 2rem 0 2.3rem;
      font: {
        size: 2.4rem;
        weight: bold;
      }
    }

    ul {
      font-size: 1.8rem;

      li {
        display: flex;
        margin-bottom: 1rem;

        svg {
          margin-right: 1rem;
        }
      }
    }
  }

  .pros {
    @include min(tablet) {
      margin-right: 4rem;
    }

    .icon {
      background: var(--primary-color);
    }
  }

  .cons .icon {
    background: var(--color-35);

    @include max(mobile) {
      margin-top: calc(-7.3rem - -1.6rem);
    }
  }
}