.location-box {
	border: 1px solid var(--color-brand-grey--300);
	padding: 1rem;
	background: var(--color-brand-white);
	text-align: left;
	container: location-box / inline-size;

	.location-box-items {
		display: grid;
		--gap: 2rem;
		gap: var(--gap);

		@container (width > 40rem) {
			grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
		}
	}

	.location-box-card {
		--line-stroke-width: 1px;
		--line-stroke-color: var(--color-brand-grey--300);
		--line-stroke-clip: 2rem;
		container: location-box-card / inline-size;
		position: relative;

		&: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);
			}
		}

		&: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);
			}
		}

		.location-box-card-inner {
			display: flex;
			flex-direction: column;
			gap: 1rem;
		}
	}

	.location-card-body {
		width: 100%;
	}

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

	.location-box__title {
		display: block;
		margin-bottom: 0.5rem;
	}

	.location-box__address,
	.location-box__full-address {
		margin: 0;
	}

}