/*
======================================================================
Much Ado
Responsive
======================================================================
*/

/* =====================================================
   Large desktop
===================================================== */

@media (max-width:1200px){

	:root{
		--header-height:90px;
	}

	.grid-4{
		grid-template-columns:repeat(3,1fr);
	}

}


/* =====================================================
   Tablet
===================================================== */

@media (max-width:992px){

	:root{
		--header-height:80px;
	}

	.grid-4,
	.grid-3,
	.grid-2{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}

	/* -------------------------
	   Hamburger
	------------------------- */

	.menu-toggle{
		display:flex;
		position:relative;
		align-items:center;
		justify-content:center;

		width:48px;
		height:48px;
		padding:0;
		margin:0;

		border:0;
		background:none;
		cursor:pointer;
		z-index:1001;
	}

	.menu-toggle span{
		position:absolute;

		width:30px;
		height:2px;

		background:var(--color-white);
		border-radius:2px;

		transition:
			transform .3s ease,
			opacity .25s ease;
	}

	.menu-toggle span:nth-child(1){
		transform:translateY(-9px);
	}

	.menu-toggle span:nth-child(2){
		transform:translateY(0);
	}

	.menu-toggle span:nth-child(3){
		transform:translateY(9px);
	}

	.menu-toggle.is-active span:nth-child(1){
		transform:rotate(45deg);
	}

	.menu-toggle.is-active span:nth-child(2){
		opacity:0;
	}

	.menu-toggle.is-active span:nth-child(3){
		transform:rotate(-45deg);
	}

	/* ------------------------- */

	.site-header__actions .button{
		display:none;
	}

	.form-row{
		grid-template-columns:1fr;
	}

}


/* =====================================================
   Mobile
===================================================== */

@media (max-width:768px){

	.container,
	.container--small{
		width:min(90%,var(--container-width));
	}

	:root{
		--space-64:3rem;
		--space-96:4rem;
		--space-128:5rem;
	}

	.posts-grid,
	.grid-4,
	.grid-3,
	.grid-2{
		grid-template-columns:1fr;
	}

}


/* =====================================================
   Small mobile
===================================================== */

@media (max-width:480px){

	html{
		font-size:15px;
	}

}