Staggered Content

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

.block-staggered-content {
	background-color: $navy;
	padding-top: rem-calc(80);
	padding-bottom: rem-calc(80);
	color: $white;
	overflow: hidden;

	.container {
		position: relative;
	}

	.heading {
		color: $white;
		@include fluid-type(28, 38);
	}

	h2 {
		@include fluid-type(30, 40);
	}

	h3 {
		@include fluid-type(24, 32);
	}

	&__copy {
		a {
			color: $white;
			transition: all 0.2s ease-in-out;

			&:hover {
				color: $orange;
			}
		}
	}

	strong {
		font-size: rem-calc(20);
	}

	&__icon {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 0;
		opacity: 0.05;
	}

	&.bg-white {
		color: $black;

		.heading {
			color: $darkBlue;
		}

		strong {
			color: $darkBlue;
		}
	}
}

class StaggeredContent {
	/**
	 * 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-example');
		this.init();
	}

	/**
	 * Example function to run class logic
	 * Can access `this.block`
	 */
	init() {
		this.blocks.forEach((block) => {
			console.log("🚀 ~ file: Example.js ~ line 20 ~ Example ~ init ~ this.block", block);
		});
	}
}

new StaggeredContent();