.ptw-container {
	width: min(100% - (var(--ptw-space-4) * 2), 1120px);
	margin-inline: auto;
}

.ptw-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--ptw-grid-gap, var(--ptw-space-6));
}

.ptw-stack {
	display: flex;
	flex-direction: column;
	gap: var(--ptw-stack-gap, var(--ptw-space-4));
}

.ptw-cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ptw-cluster-gap, var(--ptw-space-3));
	align-items: center;
}

.ptw-flow > * + * {
	margin-top: var(--ptw-flow-space, var(--ptw-space-4));
}

.ptw-surface {
	border: var(--ptw-border-width-sm) solid var(--ptw-color-border);
	border-radius: var(--ptw-radius-lg);
	background: var(--ptw-color-surface);
	color: var(--ptw-color-text-primary);
	box-shadow: var(--ptw-shadow-sm);
}

.ptw-surface-alt {
	border: var(--ptw-border-width-sm) solid var(--ptw-color-border);
	border-radius: var(--ptw-radius-lg);
	background: var(--ptw-color-surface-alt);
	color: var(--ptw-color-text-primary);
}

.ptw-link {
	color: var(--ptw-color-link);
	font-weight: var(--ptw-font-weight-semibold);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

.ptw-link:hover {
	color: var(--ptw-color-primary);
}

.ptw-link:focus-visible,
.ptw-focusable:focus-visible {
	outline: var(--ptw-border-width-md) solid var(--ptw-color-focus);
	outline-offset: var(--ptw-space-1);
	box-shadow: var(--ptw-shadow-focus);
}

@media (min-width: 48rem) {
	.ptw-container {
		width: min(100% - (var(--ptw-space-8) * 2), 1120px);
	}
}