Scrolling Section

.block-post-listing__inner {
	overflow: hidden;
	margin-left: -16px;
	width: calc( 100% + 16px );
	padding-bottom: 10px;

	.post-summary {
		margin-left: 16px;
		margin-bottom: 0;
		float: left;
		width: calc( 50% - 16px );
	}

	@supports( display: $grid ) {

		--gridColumn: 2.7;
		--gridGap: 32px;
		--gridWidth: calc( 100% - var(--gridGap));
		--gridColumnWidth: calc( var(--gridWidth) / var(--gridColumn));

		display: grid;
		grid-template-columns: 16px;
		grid-auto-flow: column;
		grid-auto-columns: var(--gridColumnWidth);

		margin: 0 -16px 0 -32px;
		width: calc( 100% + 48px );
		overflow-x: auto;

		.post-summary {
			float: none;
			width: auto;
		}

		@include media("<560px") {
			--gridColumn: 1.7;
			grid-auto-columns: var(--gridColumnWidth);
		}

		@include media("<390px") {
			--gridColumn: 1.3;
			grid-auto-columns: var(--gridColumnWidth);
		}

		&::before,
		&::after {
			content: '';
			width: 16px;
		}
	}
}