@use "@wordpress/base-styles/variables" as *;

.dataviews-view-grid-items {
	margin-bottom: auto;
	display: grid;
	gap: $grid-unit-30;
	grid-template-rows: max-content;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	padding: 0 $grid-unit-30 $grid-unit-30;
	container-type: inline-size;

	@media not (prefers-reduced-motion) {
		transition: padding ease-out 0.1s;
	}

	&.has-compact-density {
		gap: $grid-unit-20;
	}

	&.has-comfortable-density {
		gap: $grid-unit-40;
	}
}