
.wp-site-blocks > menu  {
	position: sticky;
	top: 0;
	margin-block: 0;
	z-index: 2;
	color :#fff;
	
	height: 104px;
	margin-bottom: -104px;
	
	background: rgb(0 0 0 / .75);
	font-size: var(--wp--preset--font-size--small);
	
	& .inner  {
		
		display : grid;
		grid-template-rows: auto auto auto;
		grid-template-columns: auto 1fr;
		row-gap: 0.75rem;
		
		& > .logo  {
			align-self: center;
			grid-row: 2 / span 2;
			grid-column: 1 / span 1;
		}
		
		& .utility {
			margin-block-start: 0;
			grid-row: 2 / span 1;
			grid-column: 2 / span 1;
			& > .menu-item > a:hover  {
				color: var(--wp--preset--color--turquoise);
			}
		}
		
		& .main  {
			
			margin-block-start: 0;
			grid-row: 3 / span 1;
			grid-column: 2 / span 1;
			
			& .menu-item >  a  {
				border: 1px solid var(--wp--preset--color--gris);
				padding: 0.25rem 0.5rem;
				border-radius: 1rem;
				display: block;
				&:hover  {
					color: var(--wp--preset--color--turquoise);
					border-color : var(--wp--preset--color--turquoise);
				}
			}
		}
	}
	
	@media (width <= 600px) {
		
		height: 134px;
		margin-bottom: -134px;
		
		& .inner  {	
			row-gap: 0;
			
			& > .logo  {
				grid-row: 2 / span 1;
				grid-column: 1 / span 2;
				justify-self: center;	
				margin-bottom: 1rem;
			}
			
			& .utility {
				grid-row: 1 / span 1;
				grid-column: 1 / span 2;
				font-size: var(--wp--preset--font-size--x-small);
				line-height: 1.1;
			}
			
			& .main  {
				justify-self: center;	
				grid-row: 3 / span 1;
				grid-column: 1 / span 2;
				column-gap: 0.5rem;
				justify-content: center;
			}
			
		}
	}
		
	@media (width <= 440px) {
		& .inner  {	
			& .main  {
				font-size: var(--wp--preset--font-size--x-small);
				line-height: 1.1;
				
			}
		}
	}

	
}


