.widgets--online-consultation {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: calc(var(--pd) * 2);
	align-items: center;
	padding: 5rem var(--pd);
	background: var(--gr1i);

	> .visual {
		position: relative;
		min-width: 0;
		aspect-ratio: 4 / 3;
		margin: 0;
		overflow: hidden;
		border-radius: 1.5rem;
		background-color: var(--c8);
		box-shadow: 0 0.75rem 2rem rgba(94, 84, 80, 0.12);

		&::after {
			content: "";
			position: absolute;
			inset: 1rem;
			border: var(--px) solid rgba(255, 255, 255, 0.65);
			border-radius: 1rem;
			pointer-events: none;
	}

		> img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		> img[src=""] {
			display: none;
		}

		> figcaption {
			position: absolute;
			bottom: 1.75rem;
			left: 1.75rem;
			display: inline-flex;
			gap: 0.75rem;
			align-items: center;
			max-width: calc(100% - 3.5rem);
			padding: 0.85rem 1.1rem;
			border-radius: 2rem;
			background-color: var(--bg);
			color: var(--c1);
			font-size: 0.82rem;
			font-weight: 800;
			line-height: 130%;
			box-shadow: 0 0.35rem 1rem rgba(94, 84, 80, 0.16);
			z-index: 2;

			> svg {
				width: 1.35rem;
				height: 1.35rem;
				color: var(--c3);
				flex: 0 0 auto;
			}
		}
	}

	> .copy {
		min-width: 0;

		> h2 {
			margin: 0;
			color: var(--g6);
			font-size: 2.4rem;
			font-weight: 800;
			line-height: 120%;
		}

		> .text {
			margin-top: 1.5rem;
			color: var(--g4);
			font-size: 1.05rem;
			line-height: 165%;

			> *:last-child {
				margin-bottom: 0;
			}
		}

		> .benefits {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 1rem;
			margin-top: 2rem;

			> .benefit {
				display: grid;
				grid-template-columns: 2rem minmax(0, 1fr);
				gap: 0.75rem;
				align-items: center;
				min-width: 0;
				color: var(--g5);
				font-size: 0.9rem;
				font-weight: 700;
				line-height: 140%;

				> .check {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 2rem;
					aspect-ratio: 1 / 1;
					border-radius: 50%;
					background-color: var(--c8);
					color: var(--c3);

					> svg {
						width: 1rem;
						height: 1rem;
					}
				}
			}
		}

		> .buttons {
			margin-top: 2.5rem;

			> .cta {
				&[href=""] {
					display: none;
				}
			}
		}
	}

	@media (max-width: 1279px) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--pd);

		> .copy > .benefits {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	@media (max-width: 991px) {
		grid-template-columns: minmax(0, 1fr);

		> .copy {
			> .text {
				max-width: 48rem;
			}

			> .benefits {
				grid-template-columns: repeat(2, minmax(0, 1fr));
			}
		}
	}

	@media (max-width: 767px) {
		padding-block: 4rem;

		> .copy > h2 {
			font-size: 2rem;
		}
	}

	@media (max-width: 540px) {
		padding-block: 3rem;

		> .visual > figcaption {
			bottom: 1rem;
			left: 1rem;
			max-width: calc(100% - 2rem);
		}

		> .copy {
			> .benefits {
				grid-template-columns: minmax(0, 1fr);
			}

			> .buttons > .cta {
				width: 100%;
			}
		}
	}
}