.snippet-grid{
	/* display: grid; */ /* NOTE: 'display: grid' breaks firefox */
	grid-template-columns: var(--grid-cols);
    column-gap: var(--grid-gap);
    row-gap: var(--snippet-height);
/*    background-image: url('/assets/imgs/snippet-grid.png');*/
	background-size: 100% auto;
	margin-top: calc(var(--snippet-height) * 0.5);
	width: calc(100vw / 1 - (var(--grid-gap) * 2));
/*	border: 1px solid green;*/

}

.motos-grid{
	position: absolute;
    width: 100%;
    z-index: -1;
    display: grid;
    row-gap: calc(var(--snippet-height) * 3);
    padding-top: calc((var(--snippet-height) * 3.5));
    pointer-events: none;
    top: var(--header-h);
/*    border: 1px solid red;*/
    overflow: hidden;
    min-height: 100vh;
   
}

.motos-grid .moto.justify{
	display: flex;
	justify-content: space-between;
}

.motos-grid .moto.multiline-center-right{
	display: flex;
    flex-direction: column;
    align-items: flex-end;
    height: calc(var(--snippet-height) * 3);
    justify-content: space-between;
/*    row-gap: calc(var(--snippet-height) * 0.5);*/
}
.motos-grid .moto span{
/*	border: 1px solid green;*/
	height: var(--snippet-height);
}

.motos-grid .moto.multiline-center-right span:first-of-type{
	width: 100%;
	text-align: center;
}

.motos-grid .moto.justify-w-margins{
	display: flex;
	justify-content: space-between;
	padding: 0 5vw;
}

.motos-grid .moto{
	height: var(--snippet-height);
	

  
}

.motos-grid .moto span{
	font-size: var(--snippet-height);
	font-family: "bb-modern-semicondensed-pro" !important;
	text-transform: uppercase;
}

.test-buttons{
	z-index: 10;
}

.project-snippet{
/*	width: calc((100vw - (var(--grid-gap) * 8)) / 6);*/
	margin-bottom: var(--snippet-height);
	margin-right: var(--grid-gap);
	display: grid;
	grid-column: span 2;
/*	border: 1px solid red;*/
	grid-template-rows: 5fr 1fr 1fr;
	height: var(--snippet-height);
}

video::-webkit-media-controls {
  display: none !important;
}
video::-webkit-media-controls-enclosure {
  display: none !important;
}

.project-snippet .snippet-media{

/*	padding: 7vw 6vw;*/
	display: flex;
	align-items: center;
	justify-content: center;
	height: 7vh;
	transform: scale(1);
	transition: 0.2s transform;
	cursor: pointer;
}

.project-snippet img, .project-snippet video{
	max-width: 16%;
	cursor: pointer;
    pointer-events:none;

}

.project-snippet .snippet-media:hover{
	transform: scale(1.4);
}

.project-snippet p, .project-snippet a{
	margin: 0;
	font-size: calc(var(--header-fs) * 0.9);
}

.project-snippet .snippet-no{
	text-align: center;
	letter-spacing: -0.1em;
}

.project-snippet .snippet-client, .project-snippet .no{
	max-width: 50%;
	font-family: "bb-modern-semicondensed-pro" !important;
	text-transform: uppercase;
	line-height: 1em;
}

.snippet-no .no{
	margin-right: 1.4vw;

}

@media screen and (min-width: 1000px) and (orientation:landscape){
	.project-snippet{
		width: calc((100vw - (var(--grid-gap) * 8)) / 6);
	}
}

@media screen and (min-width: 700px) and (max-width: 1000px) and (orientation:landscape){
	.project-snippet{
		width: calc((100vw - (var(--grid-gap) * 8)) / 5);
	}

}

@media screen and (max-width: 700px) and (orientation:landscape){
	.project-snippet{
		width: calc((100vw - (var(--grid-gap) * 8)) / 4);
	}

}

@media screen and (orientation:portrait){
	.project-snippet{
		width: calc((100vw - (var(--grid-gap) * 4)) / 2);
	}
	.motos-grid{
		display: none;
	}
	.snippet-no .no{
		margin-right: 4vw;
	}
	.project-snippet img, .project-snippet video{
		max-width: 23%;
	}

}