/* List with SVG (content partial) */

/* Title field */
.list-svg .svg-labels .label {
	margin: 0 0 8px;
}

.list-svg .svg-labels .label+.description>*:first-child {
	margin-top: 0;
}

.list-svg .svg-labels .description>*:last-child {
	margin-bottom: 0;
}

/* Dividers: lines when stacked, chevrons when in a row */
.list-svg--dividers {
	--list-divider: #e01b24;
	--list-rule: rgba(0, 0, 0, 0.15);
}

:is(.clrs-dark, .clrs-grey-1, .clrs-grey-2, .clrs-red, .clrs-secondary-3, .clrs-green-1) .list-svg--dividers {
	--list-divider: #fff;
	--list-rule: rgba(255, 255, 255, 0.35);
}

/* .boxed-grid in each selector beats the theme's ".boxed-columns .boxed-grid .section-col~.section-col { padding: 0 }" */
.boxed-columns .boxed-grid.list-svg--dividers {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 0;
}

/* Theme sets overflow: hidden on boxed columns, which would clip the chevron */
.boxed-columns .boxed-grid.list-svg--dividers .section-col,
.boxed-columns .boxed-grid.list-svg--dividers .section-col~.section-col {
	position: relative;
	overflow: visible;
	margin-top: 0;
	padding: 24px 0;
}

.boxed-columns .boxed-grid.list-svg--dividers .section-col~.section-col {
	border-top: 1px solid var(--list-rule);
	border-radius: 0;
}

.boxed-columns .boxed-grid.list-svg--dividers .section-col:first-child {
	padding-top: 0;
}

.boxed-columns .boxed-grid.list-svg--dividers .section-col:last-child {
	padding-bottom: 0;
}

@media only screen and (min-width: 1024px) {
	.boxed-columns .boxed-grid.list-svg--dividers {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		grid-column-gap: 64px;
	}

	.boxed-columns .boxed-grid.list-svg--dividers .section-col,
	.boxed-columns .boxed-grid.list-svg--dividers .section-col~.section-col {
		padding: 0;
		border-top: 0;
	}

	.boxed-columns .boxed-grid.list-svg--dividers .section-col:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 50%;
		right: -32px;
		width: 10px;
		height: 10px;
		border-top: 2px solid var(--list-divider);
		border-right: 2px solid var(--list-divider);
		transform: translate(50%, -50%) rotate(45deg);
	}
}