/*
 * 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 {
	max-width: var(--container-size);
	margin: 0 auto;
}
.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 ));
	padding-right: var(--z-padding-side-default);
}
.z-grid.text-with-image.image-right .text {
	padding-right: calc( 2 * var(--default-gap ));
	padding-left: var(--z-padding-side-default);
}
.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;
}
*/
.z-grid.text.full-split h2 {
    grid-column: 2 / -2;
    grid-row: 1;
}
.z-grid.text.full-split section {
    grid-row: 2;
}
.z-grid.text.full-split section:first-of-type {
    grid-column: 1 / 4;
}
.z-grid.text.full-split section:last-of-type {
    grid-column: 4 / -1;
}




.z-grid.text.full-split h2 {
    grid-column: 2 / -2;
    grid-row: 1;
}
.z-grid.text.full-split section {
    grid-row: 2;
    z-index: 1;
    z-index: inherit;
	background: transparent;
    color: var(--this-section-color-text);
}
.z-grid.text.full-split section:first-of-type {
    grid-column: 1 / 4;
    --this-section-color-bg: rgba(255,255,0,0.25);
	--this-section-color-text: #fff;
}
.z-grid.text.full-split section:last-of-type {
    grid-column: 4 / -1;
    --this-section-color-bg: rgba(255, 187, 0, 0.252);
	--this-section-color-text: #fff;
}
.full-split section > * {
    z-index: 2;
    position: relative;
}
.z-grid.text.full-split section:first-of-type::before,
.z-grid.text.full-split section:last-of-type::before {
    content: "";
    position: absolute;
    width: calc(100vw / 2);
    top: 0;
    height: 100%;
    z-index: 0;
    background-color: var(--this-section-color-bg);
    color: var(--this-section-color-text);
}
.z-grid.text.full-split section:first-of-type::before {
    right: 0;
}
.z-grid.text.full-split section:last-of-type::before {
    left: 0;
}

.full-split h3 {
    display: grid;
    grid-template-columns: 1fr max-content 1fr;
    grid-template-rows: max-content max-content;
    grid-row-gap: 1rem;
    margin-bottom: 4rem;
}
.full-split h3 i {
    grid-column: 2;
    grid-row: 1;
    opacity: 0.35;
    font-size: 200%;
}
.full-split h3 .text {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
}