@layer components.page-contact-persons {
	[data-c-page-contact-persons] {
		padding-top: 100px;
		padding-bottom: 100px;

		h2 {
			font-family: var(--font-family-serif);
			font-weight: var(--font-weight-heavy);
			color: var(--color-dark-blue);
			font-size: var(--font-size-4xl);
			margin-bottom: var(--space-10);
			line-height: 110%;

			@media screen and (max-width: 1199px) {
				font-size: var(--font-size-3xl);
				margin-bottom: var(--space-8);
			}

			@media screen and (max-width: 767px) {
				font-size: var(--font-size-2xl);
				margin-bottom: var(--space-6);
			}
		}

		ul {
			display: flex;
			flex-direction: column;

			@media screen and (max-width: 767px) {
				row-gap: var(--space-8);
			}

			.item {
				display: flex;
				column-gap: var(--space-10);

				&.item--odd {
					align-items: flex-start;
					flex-direction: row-reverse;

					@media screen and (max-width: 568px) {
						flex-direction: column;
					}

					.item-content {
						padding-top: var(--space-10);

						@media screen and (max-width: 568px) {
							padding-top: var(--space-5);
						}
					}
				}

				&.item--even {
					align-items: flex-end;
					margin-top: -60px;

					@media screen and (max-width: 1199px) {
						margin-top: -20px;
					}

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

					@media screen and (max-width: 568px) {
						flex-direction: column;
						align-items: flex-start
					}

					.item-content {
						padding-bottom: var(--space-10);

						@media screen and (max-width: 568px) {
							padding-top: var(--space-5);
							padding-bottom: 0;
						}
					}
				}

				.item-content {
					display: flex;
					flex-direction: column;
					justify-content: center;
					color: var(--color-dark-blue);

					h3 {
						font-size: var(--font-size-3xl);
						font-weight: var(--font-weight-extra-bold);
						line-height: 120%;
						color: var(--color-red);
						font-family: var(--font-family-serif);

						@media screen and (max-width: 1199px) {
							font-size: var(--font-size-2xl);
						}

						@media screen and (max-width: 767px) {
							font-size: var(--font-size-xl);
						}
					}

					p {
						margin: var(--space-1) 0 var(--space-2) 0;

						@media screen and (max-width: 767px) {
							margin: 0 0 var(--space-1) 0;
						}
					}

					a {
						display: block;
						color: var(--color-dark-blue);
						text-decoration: none;
						transition: color 0.3s ease;

						&:hover {
							color: var(--color-red);
						}
					}
				}

				.item-image {
					width: 50%;

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

					svg {
						width: 100%;
						height: auto;
					}
				}
			}
		}
	}
}