/* rem and em do NOT depend on html font-size in media queries! Instead, 1rem = 1em = 16px */

/**************************/
/* BELOW 1344px (Smaller desktops) */
/**************************/

@media (max-width: 84em) {
}

/**************************/
/* BELOW 1200px (Landscape Tablets) */
/**************************/

@media (max-width: 75em) {
	html {
		/* 9px / 16px  */
		font-size: 56.25%;
	}
	.main {
		grid-template-columns: repeat(2, 2fr);
	}
}

/**************************/
/* BELOW 944px (Tablets) */
/**************************/

@media (max-width: 59em) {
	html {
		/* 8px / 16px = 0.5 = 50% */
		font-size: 50%;
	}
	.menu-link {
		font-size: 1.8rem;
	}
	.menu-items {
		gap: 4rem;
	}
	.footer-paragraph {
		font-size: 3rem;
	}
}

/**************************/
/* BELOW 704px (Smaller tablets) */
/**************************/

@media (max-width: 44em) {
	.menu-items {
		display: block;
		text-align: center;
	}
	.search-input {
		width: 80%;
	}
	.main {
		display: flex;
		flex-direction: column;
	}
	.footer-paragraph {
		font-size: 2rem;
	}
}

/**************************/
/* BELOW 544px (Phones) */
/**************************/

@media (max-width: 34em) {
	.header-title {
		font-size: 6rem;
	}
	.footer-paragraph {
		font-size: 1.5rem;
	}
}