/* To toggle the different hero stylings in demo */
const small = document.getElementById("small-hero");
const med = document.getElementById("med-hero");
const full = document.getElementById("full-hero");

const hero = document.getElementById("hero");
const main = document.getElementById("main");
const credit = document.getElementById("hero__credit");

small.addEventListener('click', function(){burgerToggle('s')}, false);
med.addEventListener('click', function(){burgerToggle('m')}, false);
full.addEventListener('click', function(){burgerToggle('f')}, false);

function burgerToggle(size) {
	/* Remove all then re-add what's needed */
	hero.classList.remove('hero-s');
	hero.classList.remove('hero-m');
	hero.classList.remove('hero-f');
	hero.classList.remove('hero--para');
	main.classList.remove('main--para');
	credit.classList.remove('hero__credit--hidden');
	
	if (size == 'm'){
		hero.classList.add('hero-m');
	}else if (size == 'f'){
		hero.classList.add('hero-f');
		hero.classList.add('hero--para');
		main.classList.add('main--para');
	}else{
		hero.classList.add('hero-s');
		credit.classList.add('hero__credit--hidden');
	}
}