[data-role*='view'] {
	width: 100%;
	overflow: hidden;
	//the padding must be 0
	padding: 0 !important;
	&.original-scroll {
		&[data-horizontal='true'] {
			overflow-x: auto;
		}
		&[data-horizontal='false'] {
			overflow-y: auto;
		}
	}
	> div {
		display: grid;
		justify-items: start;
		align-items: start;
		grid-gap: 0 0;
		transition: all 1s;
		> * {
			align-self: center;
			justify-self: center;
		}
		&.animating {
			pointer-events: none;
			transition: transform 0.2s ease-in-out;
		}
		&.dragging {
			a {
				pointer-events: none;
			}
			transition: none;
		}
	}
	&.open {
		> div {
			grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
		}
	}
	&[data-horizontal='true'] {
		max-width: 100vw;
		cursor: ew-resize;
		> div {
			grid-auto-flow: column;
			width: fit-content;
		}
	}
	&[data-horizontal='false'] {
		max-height: 100vh;
		cursor: ns-resize;
		> div {
			grid-auto-flow: row;
			height: fit-content;
			> * {
				width: 100%;
			}
		}
	}
}