.js-band-scrollable {
	position: relative;
	overflow: hidden;
}

.js-band-scrollable-inner {
	display: flex;
	flex-flow: row nowrap;
}

.js-band-scrollable.has__startHide {
	-webkit-mask-image: linear-gradient(
		90deg,
		rgba(0,0,0,0) 0,
		rgba(0,0,0,.25) 14px,
		rgba(0,0,0,1) 28px,
		rgba(0,0,0,1) 100%);
		
	mask-image: linear-gradient(
		90deg,
		rgba(0,0,0,0) 0,
		rgba(0,0,0,.25) 14px,
		rgba(0,0,0,1) 28px,
		rgba(0,0,0,1) 100%);
}

.js-band-scrollable.has__endHide {
	-webkit-mask-image: linear-gradient(
			90deg,
			rgba(0,0,0,1) 0,
			rgba(0,0,0,1) calc(100% - 28px),
			rgba(0,0,0,.25) calc(100% - 14px),
			rgba(0,0,0,0));
		
	mask-image: linear-gradient(
		90deg,
			rgba(0,0,0,1) 0,
			rgba(0,0,0,1) calc(100% - 28px),
			rgba(0,0,0,.25) calc(100% - 14px),
			rgba(0,0,0,0));
}

.js-band-scrollable.has__startHide.has__endHide {
	-webkit-mask-image: linear-gradient(
			90deg,
			rgba(0,0,0,0) 0,
			rgba(0,0,0,.25) 14px,
			rgba(0,0,0,1) 28px,
			rgba(0,0,0,1) calc(100% - 28px),
			rgba(0,0,0,.25) calc(100% - 14px),
			rgba(0,0,0,0));
		
	mask-image: linear-gradient(
		90deg,
		rgba(0,0,0,0) 0,
		rgba(0,0,0,.25) 14px,
		rgba(0,0,0,1) 28px,
		rgba(0,0,0,1) calc(100% - 28px),
		rgba(0,0,0,.25) calc(100% - 14px),
		rgba(0,0,0,0));
}

.is__scrollable .js-band-scrollable-inner {
	padding-bottom: 20px;
	margin-bottom: -20px;

	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
	
	scrollbar-width: none; 
	-ms-overflow-style: none;
}

.is__scrollable .js-band-scrollable-inner::-webkit-scrollbar { 
	display: none; 
}

.band-right-section {
	display: flex;
	flex-flow: row nowrap;
	flex-grow: 0;
	align-self: flex-end;
	margin-left: 12px;
}
