Remove hardcoded spacings and add variables

[ChristiaanScheermeijer]

Multiple SCSS files contain generic spacings which makes it difficult to change these. Also, the actual spacings don't align with the designs as well.

Examples:

ott-web-app/src/components/VideoDetails/VideoDetails.module.scss

Lines 13 to 22 in e490487

	.mainPadding {
	padding: 37px 56px 0;
	@include responsive.desktop-small-only() {
	padding: 34px 36px 36px;
	}
	@include responsive.tablet-only() {
	padding: 34px 24px 24px;
	}

ott-web-app/src/components/VideoLayout/VideoLayout.module.scss

Lines 77 to 93 in e490487

	.relatedVideos {
	padding: 37px 56px 0;
	padding-bottom: 16px;
	@include responsive.desktop-small-only() {
	padding: 34px;
	}
	@include responsive.tablet-only() {
	padding: 34px 24px;
	}
	@include responsive.mobile-only() {
	padding: 16px;
	}
	}

ott-web-app/src/containers/ShelfList/ShelfList.module.scss

Lines 18 to 30 in e490487

	.shelfContainer {
	position: relative;
	padding: 12px 56px;
	&.featured {
	padding: 12px 20%;
	}
	@include responsive.mobile-only() {
	padding: 8px 60px 8px variables.$base-spacing;
	&.featured {
	padding: 24px variables.$base-spacing;

The designs have the following spacings:

• Mobile (<768): 16px
• Tablet (>768 & 1024): 24px
• Desktop (>1024): 56px