.widgets--why-immunology {
	position: relative;
	overflow: hidden;
	padding: 5rem var(--pd);
	background: var(--gr1);

	&::before {
		content: "";
		position: absolute;
		top: -10rem;
		right: -7rem;
		width: 22rem;
		aspect-ratio: 1 / 1;
		border-radius: 50%;
		background-color: var(--bg2);
		opacity: 0.65;
	}

	> * {
		position: relative;
		z-index: 1;
	}

	> .intro {
		> h2 {
			max-width: 52rem;
			margin: 0 auto;
			color: var(--g6);
			font-size: 2.4rem;
			font-weight: 800;
			line-height: 120%;
			text-align: center;
		}

		> .intro-grid {
			display: grid;
			grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
			gap: calc(var(--pd) * 2);
			align-items: center;
			margin-top: 3rem;

			> .process {
				display: grid;
				grid-template-columns: minmax(0, 1fr) 2.5rem minmax(0, 1fr) 2.5rem minmax(0, 1fr);
				gap: 0.75rem;
				align-items: center;

				> .stage {
					align-self: start;
					min-width: 0;
					text-align: center;

					> .visual {
						width: min(100%, 9rem);
						aspect-ratio: 1 / 1;
						margin-inline: auto;
						padding: 0.75rem;
						border: var(--px) solid var(--c7);
						border-radius: 50%;
						background-color: var(--bg);

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

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

					> .label {
						margin-top: 0.75rem;
						color: var(--g6);
						font-size: 0.85rem;
						font-weight: 800;
						line-height: 130%;
					}
				}

				> .arrow {
					position: relative;
					width: 100%;
					height: var(--px);
					margin-bottom: 2rem;
					background-color: var(--c3);

					&::after {
						content: "";
						position: absolute;
						top: 50%;
						right: 0;
						width: 0.5rem;
						height: 0.5rem;
						border-top: var(--px) solid var(--c3);
						border-right: var(--px) solid var(--c3);
						transform: translateY(-50%) rotate(45deg);
					}
				}
			}

			> .text {
				color: var(--g4);
				font-size: 1.05rem;
				line-height: 170%;

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

		> .note {
			max-width: 54rem;
			margin: 3rem auto 0;
			padding: 1.5rem 2rem;
			border: var(--px) solid var(--c6);
			border-left-width: 0.35rem;
			border-radius: 1rem;
			background-color: var(--bg2);
			color: var(--g6);
			line-height: 160%;
			text-align: center;

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

	> .expertise {
		margin-top: 4rem;
		padding-top: 4rem;
		border-top: var(--px) solid var(--c7);

		> h3 {
			margin: 0 0 2rem;
			color: var(--g6);
			font-size: 1.7rem;
			font-weight: 800;
			text-align: center;
		}

		> .areas {
			display: grid;
			grid-template-columns: repeat(4, minmax(0, 1fr));
			gap: var(--pd);
			counter-reset: immunology-area;

			> .area {
				display: grid;
				grid-template-columns: 2.5rem minmax(0, 1fr);
				gap: 1rem;
				align-items: center;
				min-width: 0;
				min-height: 6.5rem;
				margin: 0;
				padding: 1.25rem;
				border: var(--px) solid var(--c7);
				border-radius: 1rem;
				background-color: var(--bg);
				counter-increment: immunology-area;

				> .number {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 2.5rem;
					aspect-ratio: 1 / 1;
					border-radius: 50%;
					background-color: var(--c8);
					color: var(--c3);
					font-size: 0.8rem;
					font-weight: 800;

					&::before {
						content: counter(immunology-area, decimal-leading-zero);
					}
				}

				> h4 {
					margin: 0;
					color: var(--g6);
					font-size: 0.95rem;
					font-weight: 700;
					line-height: 140%;
				}
			}
		}
	}

	@media (max-width: 1279px) {
		> .intro > .intro-grid {
			gap: var(--pd);
		}
	}

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

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

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

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

			> .intro-grid > .process {
				grid-template-columns: minmax(0, 1fr) 1.5rem minmax(0, 1fr) 1.5rem minmax(0, 1fr);
				gap: 0.35rem;

				> .arrow {
					margin-bottom: 3rem;
				}
			}

			> .note {
				padding: 1.25rem;
				text-align: left;
			}
		}
	}

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

		> .intro > .intro-grid {
			> .process {
				> .stage {
					> .visual {
						padding: 0.5rem;
					}

					> .label {
						font-size: 0.72rem;
					}
				}

				> .arrow {
					margin-bottom: 2.5rem;
				}
			}
		}

		> .expertise {
			margin-top: 3rem;
			padding-top: 3rem;

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