/*
 * Theme variables
 *
 */


:root {
	
/* Containers */
	--container-size: 104rem;
	--padding-default: 2rem;	
	--container-normal-max-width: 120rem;
	--container-small-max-width: 74rem;
	--container-medium-max-width: 110rem;
	--container-wide-max-width: 144rem;
	--container-wide-extra-max-width: 144rem;
	--container-full-max-width: 100%;
	
	--halfwidth-size: calc(50% - calc(var(--default-gap) / 2));
	--thirdwidth-size: calc(33.33% - calc(var(--default-gap) * 2 / 3));
	--halfwidth-size-large-gap: calc(50% - calc(var(--large-gap) / 2));
	--thirdwidth-size-large-gap: calc(33.33% - calc(var(--large-gap) * 2 / 3));

	--grid--colums-default: minmax(var(--container-grid-padding-side), 1fr) repeat(4, minmax(auto, calc( var(--container-size) / 4) )) minmax(var(--container-grid-padding-side), 1fr);
	--grid--colums-half-left: minmax(var(--container-grid-padding-side), 1fr) repeat(2, minmax(auto, calc( var(--container-size) / 4) ));
	--grid--colums-half-right: repeat(2, minmax(auto, calc( var(--container-size) / 4) )) minmax(var(--container-grid-padding-side), 1fr);
	

	/* gaps and paddings */
	--default-gap: 3rem;
	--large-gap: 4rem;
	--small-gap: 2rem;
	--mini-gap: calc(var(--default-gap) / 3);

	--section-padding-default: 5rem;
	/* padding to honor to keep text readable */
	--container-padding-side: 2rem;
	--container-grid-padding-side: 3rem;
	--container-padding-side-menu: var(--container-padding-side);
	/* --container-padding-side-nav: calc( ( ( 100vw - var(--container-normal-max-width) ) / 2 ) ); */
	--container-padding-side-nav: 4rem;
	
	
}	
	

/*
 * 6col grid 
 * ======================================================== */
.z-grid {
	width: 100%;
	height: 100%;
	position: relative;
	display: grid;
	grid-template-columns: var(--grid--colums-default);
	grid-auto-rows: max-content;
}


.z-grid > * {
	grid-column: 2 / -2;
}
.z-grid > .text-with-image > * {
	grid-column: 2 / -2;
}



/* Text with image block */
.z-grid.text-with-image .text,
.z-grid.text-with-image figure {
	grid-row: 2;
	max-width: calc( var(--container-medium-max-width) / 2 );
}
.z-grid.text-with-image figure {
	margin: 0;
}
.z-grid.text-with-image figure img {
	display: block;
}
.z-grid.text-with-image .text,
.z-grid.text-with-image.image-right figure {
	grid-column: 4 / -2;
	justify-self: start;
}
.z-grid.text-with-image.image-right .text,
.z-grid.text-with-image figure {
	grid-column: 2 / 4;
	justify-self: end;
}
.z-grid.text-with-image.image-left .text {
	padding-left: calc( 2 * var(--default-gap ));
}
.z-grid.text-with-image.image-right .text {
	padding-right: calc( 2 * var(--default-gap ));
}
.z-grid.text-with-image figure {
	max-width: 100%;
}

/* styling */
.z-grid.text-with-image.has-panel-image figure {
	width: 100%;
	position: relative;
	box-shadow: 0 0 14px 0 rgba(0,0,0,.14);
	background: var(--bg-color-main);
	padding: 1rem;
	border-radius: 1rem;
}