.wp-block-maxdecisions-three-columns-solutions {
	background-color: var(--white);
	overflow: hidden;
	margin-bottom: 112px;
  padding: 96px 0;

	@media only screen and (min-width: 780px) {
    margin-bottom: 115px;
    padding: 55px 0;
  }

  @media only screen and (max-width: 780px) {
    margin-bottom: 115px;
    padding: 55px 0;
  }

  .three-column-solutions-title {
		font-size: 24px;
		padding-left: 0 !important;
		padding-right: 0 !important;
    font-weight: 700;
		line-height: 37px;
    color: var(--light-gray);
    text-align: center;
    -webkit-font-smoothing: antialiased;
		width: 100%;
		max-width: 373px;
    margin: 0 auto;
		margin-bottom: 70px;

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

    .three-column-solutions-link {
			margin-left: 8px;
      position: relative;

			a {
        color: var(--dark-grey);
      }

			a::after {
				content: "";
				position: absolute;
				top: 35%;
				left: 110%;
				background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iOHB4IiBoZWlnaHQ9IjEycHgiIHZpZXdCb3g9IjAgMCA4IDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIGlkPSJHcm91cCI+CiAgICA8cGF0aCBkPSJNMCAxLjQxNDIxTDEuNDE0MjEgMEw3LjEyNTk2IDUuNzExNzRMMS40MTQyMSAxMS40MjM1TDEuNzc2MzZlLTE1IDEwLjAwOTNMNC4yOTc1MyA1LjcxMTc0TDAgMS40MTQyMVoiIGlkPSLwn46oLUljb24tU3R5bGUiIGZpbGw9IiMwMzBGMUMiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlPSJub25lIiAvPgogIDwvZz4KPC9zdmc+);
				width: 7px;
				height: 14px;
				background-repeat: no-repeat;

				@media only screen and (min-width: 1024px) {
					top: 45%;
					left: 110%;
				}
			}

    }
  }

  .three-column-solutions-wrapper {
    margin: 0 -42px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;

    .swiper-three-col {
      overflow: hidden;
    }

    .swiper-slide {
      @media only screen and (min-width: 780px) {
        flex: 0 calc(33% - 84px);
        margin: 0 42px 0px;
        max-width: 300px;
        min-height: 248px;
        position: relative;
        text-align: center;

        @media only screen and (max-width: 950px) {
          flex: 0 calc(50% - 84px);
        }

        @media only screen and (max-width: 780px) {
          flex: 100%;
          max-width: 100%;
          margin: 0 42px 0px;
        }
      }
    }

    .card-link {
      .link {
				font-size: 12px;
				font-weight: 700;
				letter-spacing: 1px;
				color: #1c1c1f;
				position: relative;
				z-index: 99;
				transition: .4s ease-in-out;
				line-height: 24px;
        display: inline;
        margin-bottom: 0;
      }

			.link::after {
				right: -35px;
			}

			.card-title {
				font-size: 20px;
				line-height: 25px;
				font-weight: 700;
				color: #1c1c1f;
			}
    }

		.card-link:hover {
			.link {
				color: var(--blue);
			}

			.link::after {
				right: -40px;
				background-color: var(--blue);
			}

			.card-title {
				color: var(--blue);
			}
		}

    .three-columns-solutions__card {
      @media only screen and (max-width: 780px) {
        flex: 0 calc(33% - 84px);
        margin: 0 42px 20px;
        max-width: 300px;
        min-height: 248px;
        position: relative;
        text-align: center;
        @media only screen and (max-width: 950px) {
          flex: 0 calc(50% - 84px);
        }
        @media only screen and (max-width: 780px) {
          flex: 100%;
          margin: 0 auto 42px;
        }
      }

      .three-columns-solutions__card--image {
        min-height: 48px;
        max-height: 57px;
        margin-bottom: 34px;
      }

			img {
				width: 100%;
				height: 100%;
			}

      img,
      svg {
        object-fit: contain;
        max-width: 75px;
        @media only screen and (max-width: 780px) {
          margin-bottom: 38px;
        }
      }

      .animation-container {
        height: 48px;
        margin-bottom: 34px;
        @media only screen and (max-width: 780px) {
          margin-bottom: 38px;
        }
      }

      .card-title {
        margin-bottom: 15px;
        transition: 0.4s ease-in-out;
      }

      .card-text {
        margin-bottom: 37px;
        opacity: 0.33;
      }
    }

    .swiper-slide {
      max-width: 300px;
      width: 100%;
      @media only screen and (max-width: 780px) {
        max-width: 100%;
      }
    }
    .swiper-pagination {
      bottom: -15px;
      left: 0px;

			.swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        background-color: #dbe1ff;
        color: #dbe1ff;
      }
      .swiper-pagination-bullet-active {
        background-color: var(--blue);
        color: var(--blue);
      }
    }
  }
}

