.contact-box {
	border: 1px solid var(--color-brand-grey--300);
	padding: 1rem;
	background: var(--color-brand-white);
	text-align: left;
	container: contact-box / inline-size;
	
	.contact-cards-items {
		display: grid;
		--gap: 2rem;
		gap: var(--gap);
		@container (width > 40rem) {
			grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
		}
	}

	/* &:not(:has( .contact-cards-items > :nth-child(2) )) {
		max-width: 50%;
	} */

	.contact-box-card {
		--line-stroke-width: 1px;
		--line-stroke-color: var(--color-brand-grey--300);
		--line-stroke-clip: 2rem;
		container: contact-box-card / inline-size;
		position: relative;
		max-width: 50rem;
		
		/* Line to the left on any card that is not in the first column */
		&:not([data-col="0"]) {
			&:before {
				content: '';
				position: absolute;
				left: calc(var(--gap) / -2);
				top: 50%;
				transform: translate(-50%, -50%);
				width: var(--line-stroke-width);
				height: calc(100% - var(--line-stroke-clip));
				background: var(--line-stroke-color);
			}
		}
		/* Line above on any card that is not in the first row */
		&:not([data-row="0"]) {
			&:after {
				content: '';
				position: absolute;
				left: 50%;
				top: calc(var(--gap) / -2);
				transform: translate(-50%, -50%);
				width: calc(100% - var(--line-stroke-clip));
				height: var(--line-stroke-width);
				background: var(--line-stroke-color);
			}
		}

		.contact-box-card-inner {
			@container (width > 26rem) {
				display: flex;
				flex-direction: row;
				gap: 1rem;
				position: relative;
			}
		}
	}

	.contact-card-visual {
		--width: 14rem;
		flex: 0 0 var(--width);
		width: var(--width);
		height: calc(var(--width) * 4 / 3);
		/* border: 1px solid var(--color-brand-grey--300); */
		overflow: hidden;
		background-size: cover;
		background-position: center;
	}

	.contact-card-body {
		/* overflow-wrap: break-word;
		word-break: break-all; */
		width: 100%;

		p {
			max-width: 42ch;
		}
	}

	.break-all {
		overflow-wrap: break-word;
		word-break: break-all;
	}
	
}