Tile Grid

@import "../../resources/scss/util/colours";
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";

.block-tile-grid {
	background-color: $veryLightBlue;
	padding-top: rem-calc(80);
	padding-bottom: rem-calc(80);
	overflow: hidden;

	.heading {
		@include fluid-type(28, 34);
	}

	&__buttons {
		margin-top: rem-calc(10);
	}

	&__tiles {
		margin-top: rem-calc(30);
	}

	&__tile {
		background-color: $navy;
		color: $white;
		padding: rem-calc(24);
		font-size: rem-calc(24);
		height: 100%;
		min-height: rem-calc(170);
		display: flex;
		align-items: center;
		position: relative;
	}

	&__number {
		position: absolute;
		right: rem-calc(10);
		bottom: rem-calc(10);
		font-family: $font-family-heading;
		font-size: rem-calc(64);
		line-height: normal;
		pointer-events: none;
		opacity: 0.1;
	}

	.swiper {
		overflow: visible;
	}

	.swiper-wrapper {
		@include bp($lg) {
			margin-left: rem-calc(-15);
			margin-right: rem-calc(-15);
			transform: none !important;
			flex-wrap: wrap !important;
			box-sizing: border-box !important;
			width: auto !important;
		}
	}

	.swiper-slide {
		margin-bottom: rem-calc(30);

		@include bp($lg) {
			width: calc(25% - 24px) !important;
			margin: rem-calc(0 12 24) !important;
		}

		&:nth-of-type(odd) {
			.block-tile-grid__tile {
				background-color: $blue;
			}
		}
	}

	.swiper-slide {
		height: auto;
	}

	.e-carousel__navigation {
		margin-left: 0;
		margin-top: rem-calc(50);
	}
}

class TileGrid {
	/**
	 * Create and initialise objects of this class
	 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor
	 * @param {object} block
	 */
	constructor() {
		this.blocks = document.querySelectorAll('.block-tile-grid');
		this.init();
	}

	/**
	 * Example function to run class logic
	 * Can access `this.block`
	 */
	init() {
		this.blocks.forEach((block) => {
			const blockCarousel = block.querySelector(".swiper");
			const navNext = block.querySelector(".e-carousel__next");
			const navPrev = block.querySelector(".e-carousel__prev");

			const swiper = new Swiper(blockCarousel, {
				slidesPerView: 1.5,
				spaceBetween: 24,
				navigation: {
					nextEl: navNext,
					prevEl: navPrev,
				},
				breakpoints: {
					768: {
						slidesPerView: 2.5,
					},
					992: {
						slidesPerView: 4,
					},
					// 992: {
					// 	slidesPerView: 5,
					// }
				}
			});
		});

	}
}

new TileGrid();