.connect--wrapper {
	padding: 3rem 0 4rem;

	.content-width {
		gap: 2.5rem;
	}

	.connect--heading {
		margin: 0;
		text-align: center;

		span {
			padding: 0 0.5rem;
			font-style: italic;
			font-family: var(--font__serif);
			font-size: calc(
				(var(--font-size__base, 18px) * var(--font-factor__h1, 2)) +
					0.5rem
			);
		}
	}

	.connect--cards {
		.connect--card--item {
			flex: 1 1 100%;
			background: var(--card-bg);
			gap: 0;

			.card--image {
				border: 0.35rem solid #f0f0f0;
			}

			img {
				width: 100%;
			}

			.card-content--wrapper {
				padding: 1rem 1rem 1.5rem;

				.card--heading {
					margin: 0;
					text-align: center;
					line-height: 1.2;
					font-size: calc(
						var(--font-size__base, 18px) *
							var(--font-factor__h4, 1.2)
					);

					a {
						color: var(--brand-blue);
						font-weight: 500;
						text-decoration: none;

						&:hover {
							color: var(--brand-teal);
						}
					}
				}
			}
		}
	}

	.connect--links {
		justify-content: center;
		align-items: center;

		.links-label {
			margin: 0;

			span {
				font-style: italic;
				font-family: var(--font__serif);
			}
		}

		a {
			i {
				font-size: 1.5rem;
				color: var(--brand-teal);
			}

			&:hover {
				i {
					filter: brightness(0.8);
				}
			}
		}
	}

	.links-wrapper {
		flex-wrap: wrap;
		justify-content: center;
		gap: 2rem;

		.connect--links {
			flex: 1 1 100%;
			gap: 0.5rem 1rem;
		}
	}
}

@media screen and (min-width: 660px) {
	.connect--wrapper {
		.connect--cards {
			.connect--card--item {
				flex: 0 1 calc(50% - 0.5rem);
			}
		}
	}
}
@media screen and (min-width: 1000px) {
	.connect--wrapper {
		.connect--cards {
			.connect--card--item {
				flex: 0 1 calc(25% - 0.75rem);
			}
		}
		.links-wrapper {
			gap: 1rem;
			flex-wrap: nowrap;

			&:before,
			&:has(.connect--links:nth-of-type(3)):after {
				content: '';
				display: block;
				flex: 0 0 1px;
				background: var(--brand-teal);
				opacity: 0.3;
				width: 1px;
				max-width: 1px;
			}
			&:before {
				order: 2;
			}
			&:after {
				order: 4;
			}

			.connect--links {
				flex: 1 1 30%;

				&:nth-of-type(1) {
					order: 1;
				}
				&:nth-of-type(2) {
					order: 3;
				}
				&:nth-of-type(3) {
					order: 5;
				}
			}
		}
	}
}