.wp-block-maxdecisions-key-points {
	overflow: hidden;
	margin-bottom: 70px;

  @media only screen and (min-width: 768px) {
		margin-bottom: 96px;
  }

  .key-points__wrapper {
    display: flex;
		flex-direction: column;
		align-items: center;
    margin: 0 -14px;

		@media only screen and (min-width: 768px) {
			flex-direction: row;
			align-items: normal;
    }

    .key-points-card {
			display: flex;
      flex-direction: column;
      align-items: center;
			flex: 100%;
      justify-content: space-between;
      position: relative;
      border-radius: 20px;
			margin: 0 0 30px 0;
			padding: 49px;
			max-height: 500px;
			max-width: 350px;
      z-index: 1;

      @media only screen and (min-width: 768px) {
				flex: 0 calc(50% - 28px);
				margin: 0 14px 20px;
				padding: 65px 44px 54px 44px;
				max-width: 100%;
				max-height: 100%;
      }
    }

    .card-left {
      .key-points-card__title {
				font-size: 24px;
				line-height: 34px;
				font-weight: 700;
        color: var(--white);
        width: 100%;
				max-width: 100%;
				margin-bottom: 16px;

        @media only screen and (min-width: 768px) {
					font-size: 34px;
					line-height: 43px;
					max-width: 378px;
					margin-bottom: 48px;
        }
      }

			#lottie-key-points > :nth-child(2) {
				display: none;
			}

			#lottie-key-points, .animation-container {
				position: relative;
				width: 100%;
				height: 100%;
				left: -50px;
				bottom: 40px;
				z-index: -1;

        @media only screen and (min-width: 768px) {
					position: absolute;
					height: auto;
					left: 0;
					bottom: 90px;
        }

        @media only screen and (min-width: 951px) {
					bottom: 10px;
				}
      }

      .button--arrow {
        display: inline-block;
      }

      .button-keys-points {
        padding: 10px 30px 10px 15px;

				@media only screen and (min-width: 768px) {
					padding: 15px 50px 15px 18px;
        }
      }
    }

    .card-right {
			justify-content: center;

      .key-points-card__title {
				font-size: 24px;
				line-height: 33px;
				font-weight: 700;
        color: var(--dark-grey);
        width: 100%;
				max-width: 236px;
				margin-bottom: 35px;

        @media only screen and (min-width: 768px) {
					font-size: 34px;
					line-height: 43px;
					margin-bottom: 91px;
					max-width: 290px;
        }
      }

      .button-keys-points {
        padding: 10px 40px 10px 15px;

				@media only screen and (min-width: 1024px) {
					padding: 15px 50px 15px 18px;
        }
      }

			.button--black {
				border: 1px solid #1c1c1f;
				background-color: transparent;
				color: #1c1c1f;
			}

			.button--black:hover {
				color: #4d6bff;
				border: 1px solid #4d6bff;
			}

			.button--black::after {
				content: "";
				position: absolute;
				color: inherit;
				background-color: currentColor;
				transition: .3s ease-in-out;
				top: 50%;
				transform: translateY(-50%);
				right: 14px;
				-webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMzVweCIgaGVpZ2h0PSIzNXB4IiB2aWV3Qm94PSIwIDAgMzUgMzUiIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgaWQ9Ikdyb3VwIj4KICAgIDxnIGlkPSJBcnJvd3NjaGV2cm9uX3JpZ2h0Ij4KICAgICAgPHBhdGggZD0iTTAgMEwzNSAwTDM1IDM1TDAgMzVMMCAwWiIgaWQ9IkJveC0yNHB0IiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0ibm9uZSIgLz4KICAgICAgPHBhdGggZD0iTTEzLjc2OTEgMTEuMjc5MUwxNS44MzE1IDkuMjE2NjdMMjQuMTYxMSAxNy41NDYzTDE1LjgzMTUgMjUuODc1OUwxMy43NjkxIDIzLjgxMzVMMjAuMDM2MyAxNy41NDYzTDEzLjc2OTEgMTEuMjc5MVoiIGlkPSLwn46oLUljb24tU3R5bGUiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlPSJub25lIiAvPgogICAgPC9nPgogIDwvZz4KPC9zdmc+);
				mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMzVweCIgaGVpZ2h0PSIzNXB4IiB2aWV3Qm94PSIwIDAgMzUgMzUiIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgaWQ9Ikdyb3VwIj4KICAgIDxnIGlkPSJBcnJvd3NjaGV2cm9uX3JpZ2h0Ij4KICAgICAgPHBhdGggZD0iTTAgMEwzNSAwTDM1IDM1TDAgMzVMMCAwWiIgaWQ9IkJveC0yNHB0IiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0ibm9uZSIgLz4KICAgICAgPHBhdGggZD0iTTEzLjc2OTEgMTEuMjc5MUwxNS44MzE1IDkuMjE2NjdMMjQuMTYxMSAxNy41NDYzTDE1LjgzMTUgMjUuODc1OUwxMy43NjkxIDIzLjgxMzVMMjAuMDM2MyAxNy41NDYzTDEzLjc2OTEgMTEuMjc5MVoiIGlkPSLwn46oLUljb24tU3R5bGUiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlPSJub25lIiAvPgogICAgPC9nPgogIDwvZz4KPC9zdmc+);
				-webkit-mask-repeat: no-repeat;
				mask-repeat: no-repeat;
				-webkit-mask-size: contain;
				mask-size: contain;
				width: 23px;
				height: 23px;
			}

      .list {
        margin-left: 0;
      }

      .meter-wrapper {
        display: flex;
        flex-direction: column;
        align-self: normal;
        width: 100%;
        max-width: 320px;
        margin-bottom: 27px;

        li {
          list-style: none;
          color: #606871;
          font-size: 12px;
          font-weight: 700;
        }
      }

      .meter {
        height: 14px;
        position: relative;
        background: #dfe1e3;
        overflow: hidden;
        margin-bottom: 3px;
        width: 259px;
        border-radius: 7px;
      }

      .meter span {
        display: block;
        height: 100%;
      }

      .progress {
        background-color: var(--dark-grey);
        width: 0px;
        border-radius: 7px;
      }

			.progress.animating {
				animation: progressBar 3s 0.4s ease-in-out forwards 1;
			}

      @keyframes progressBar {
        0% {
          width: 0;
        }
        100% {
          width: 100%;
        }
      }
    }

		.button-keys-points {
			font-size: 12px;
			line-height: 24px;
			font-weight: 700;
			letter-spacing: 1px;
			display: inline-block;

			@media only screen and (min-width: 768px) {
				font-size: 14px;
			}
		}

		.button-keys-points.button--white {
			align-self: flex-start;
		}
  }
}