/**
 * Layout utilities.
 */

.dc-container {
	width: 100%;
	max-width: var(--dc-content-width);
	margin-inline: auto;
	padding-inline: var(--dc-space-4);
}

.dc-container--wide {
	max-width: var(--dc-wide-width);
}

.dc-container--narrow {
	max-width: 560px;
}

.dc-blog-layout {
	display: grid;
	gap: var(--dc-space-8);
}

@media (min-width: 768px) {
	.dc-blog-layout {
		grid-template-columns: 1fr 280px;
		align-items: start;
	}
}

.dc-post-list,
.dc-product-rail__grid,
.dc-advice__grid {
	display: grid;
	gap: var(--dc-space-6);
}

@media (min-width: 480px) {
	.dc-product-rail__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 768px) {
	.dc-product-rail__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.dc-advice__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1024px) {
	.dc-product-rail__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.dc-checkout__grid {
	display: grid;
	gap: var(--dc-space-8);
}

@media (min-width: 1024px) {
	.dc-checkout__grid {
		grid-template-columns: 1fr 380px;
		align-items: start;
	}
}

.dc-checkout__sidebar {
	background: var(--dc-colour-surface);
	border: 1px solid var(--dc-colour-border);
	border-radius: var(--dc-radius-lg);
	padding: var(--dc-space-6);
}