body					{	width: 100vw;
						overflow-x: hidden; }

.slide-box			{	margin-top: 2em; }

/// EXAMPLE 1

$slide-width: percentage(1/3);


.ex-1-grid			{	display: flex;
						flex-wrap: wrap;
						width: 100%;

	.slide:not(.slide-detail)
					{	width: 33%; height: 0;
						width: $slide-width;
						//position: relative;
						padding-bottom: $slide-width;
						background-size: cover; }

	.slide-detail	{	background-size: contain; }

}	 


/// EXAMPLE 2

.ex-2-carousel		{	width: 100%;
						padding-bottom: 75%; }
						


/// EXAMPLE 3

.ex-3-lazyload		{

	.slide:not(.slide-detail)
					{	float: left; width: 45%; height: 0;
						padding-bottom: 32%;
						margin-right: 5%; margin-bottom: 2em;
						background-size: cover; }

}