.section-featured-product-variants {

	.fpv--flex {

		display: flex;
		width: 100%;

		@media screen and (max-width: 1024px) {
			flex-wrap: wrap;
		}

		.fpv--col {

			width: 33.3%;
			padding-right: 24px;

			@media screen and (max-width: 1024px) {
				width: 100%;
				padding: 0 0 24px 0;
			}

			&.fpv--col-text {

				.block-title {
					margin: 0 0 16px 0;
				}

				.block-rte {
					margin: 0 0 32px 0;
					@media screen and (max-width: 768px) {
						margin-bottom: 8px;
					}
				}

			}

			.fpv--col-card {

				background: #fff;
				border: 1px solid #A3AECF;
				border-radius: 24px;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.card-head {

					background: #E8EAF8;
					padding: 24px;
					position: relative;
					border-radius: 24px 24px 0 0;
					border-bottom: 1px solid #A3AECF;

					@media screen and (max-width: 768px) {
						padding: 16px;
					}
					
					.v-title {
						font-size: 24px;
						margin:0;
						@media screen and (max-width: 768px) {
							font-size: 20px;
						}
					}

					.card--flag {

						background: #BD2C38;
						font-size: 14px;
						letter-spacing: 0;
						padding: 8px;
						border-radius: 4px;
						transform: rotate(-4deg);
						position: absolute;
						top: -10px;
						right: 20px;
						line-height: 1;

						@media screen and (max-width: 768px) {
							font-size: 12px;
						}

						span {
							color: #fff !important;
						}

					}

				}

				.card-body {

					padding: 24px;

					@media screen and (max-width: 768px) {
						padding: 16px;
					}

					.card-usps {

						display: flex;
						flex-direction: column;
						gap: 12px;
						margin: 0 0 32px 0;

						@media screen and (max-width: 768px) {
							margin: 0;
						}

						.usp {

							font-size: 16px;
							padding-left: 24px;
							position: relative;

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

							&::before {
								content:'';
								position: absolute;
								top: 4px;
								left: 0;
								width: 16px;
								height: 16px;
								background: url('icon-check-white.svg') no-repeat center center / 12px #2D3078;
								border-radius: 50%;
							}

							strong {
								display: block;
								font-size: 18px;
								margin: 0 0 10px 0;
								@media screen and (max-width: 768px) {
									font-size: 16px;
								}
							}

							span {
								display: block;
								margin: 0 0 10px 0;
								
								&.li {
									position: relative;
									padding-left: 16px;
									&::before {
										content: '•';
										position: absolute;
										top: 0;
										left: 0;
									}
								}

							}

							&.plain {

								padding: 0;
								font-style: italic;
								font-weight: 600;

								&::before {
									display: none;
								}

							}

						}

					}

				}

				&.variant-complete {

					.card-head {

						background: #2D3078;
						.v-title {
							color: #fff !important;
						}

					}

				}

				.form-container {

					margin: 24px;

					@media screen and (max-width: 768px) {
						margin: 16px;
					}

					.form-container--inner {

						border-radius: 16px;
						border: 1px solid #E8EAF8;
						background: #E8EAF8;
						padding: 16px;

						.variant-title {

							text-transform: uppercase;
							margin: 0 0 16px 0;
							letter-spacing: 8%;
							font-size: 12px;
							font-weight: 600;

						}

						.v-price {

							display: flex;
							align-items: flex-end;
							font-size: 32px;
							line-height: 1;
							font-weight: 600;
							margin: 0 0 16px 0;

							&:not(span){
								font-family: Steinbeck;
							}

							span {
								font-size: 14px;
								font-weight: 400;
							}

						}

						.vb-price {

							font-size: 14px;
							margin: 0 0 16px 0;

							svg {
								display: inline-block;
								margin: 0 3px;
							}

						}

						.submit-btn {

							.button {
								width: 100%;
								text-align: center;
							}

						}

					}

					.foot_ref {

						display: flex;
						gap: 12px;
						margin: 16px 0 0 0;
						align-items: flex-start;
						font-size: 14px;

						svg {
							height: unset;
							min-width: 18px;
						}

						span {
							color: #2B0D0F !important;
						}

					}

				}

			} /* fpv--col-card */

		}

	}

	&.enable_fw_blocks {

		.fpv--flex {

			flex-wrap: wrap;
			justify-content: space-between;

			.fpv--col {

				width: calc(50% - 12px);
				padding-right: 0;

				@media screen and (max-width: 1024px) {
					width: 100%;
				}

				&.fpv--col-text {
					width: 100%;
				}

			}

		}

	}

	&.scheme-red {

		.fpv--flex {

			.fpv--col {

				.fpv--col-card {

					border: none;

					&.variant-complete {

						.card-head {
							background: var(--color-maroon-light);
						}

						.form-container {
							.form-container--inner {
								border: 1px solid #ED707D;
							}
						}

					}

					.card-head {

						border: none;
						background: var(--color-pink);
						
						.v-title {

						}

						.card--flag {

							background: #616B94;

						}

					}

					.card-body {


						.card-usps {


							.usp {


								&::before {
									background-color: #8A3B40;
								}

								strong {

								}

								span {
									
									&.li {
									}

								}

								&.plain {

								}

							}

						}

					}

					&.variant-complete {

						.card-head {

							.v-title {
							}

						}

					}

					.form-container {


						.form-container--inner {

							background: var(--color-pink);


							.variant-title {

							}

							.v-price {


							}

							.vb-price {

								svg path {
									fill: var(--color-maroon-dark);
								}

							}

							.submit-btn {

								.button {
									background: var(--color-maroon-dark);
								}

							}

						}

						.foot_ref {


							svg {
							}

							span {
							}

						}

					}

				} /* fpv--col-card */

			}

		}

	}

}