/* ---- FRONT-END ---- */
#brx-image-title-text-wrapper {
	
}

#brx-image-title-text-wrapper #brx-image-title-text-content-wrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

#brx-image-title-text-wrapper #brx-image-title-text-content-wrapper .brx-image-title-text-content-image-container {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-basis: 66.66667%;
	flex: 0 0 66.66667%;
	border-radius: 40px;
	max-width: 66.666667%;
	overflow: hidden;
	mask-image: url('images/Tetra - Bricks - Mask image.svg');
	mask-size: cover;
	mask-repeat: no-repeat;
}

#brx-image-title-text-wrapper #brx-image-title-text-content-wrapper .brx-image-title-text-content-image-container img {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: center;
}

#brx-image-title-text-wrapper #brx-image-title-text-content-wrapper .brx-image-title-text-content-container {
	display: flex;
	font-size: var(--font-size-24);
	color: #FFFFFF;
	flex-direction: column;
	flex-basis: 33.33334%;
	flex: 0 0 33.33334%;
	padding: 70px;
	border-radius: 40px;
}

#brx-image-title-text-wrapper #brx-image-title-text-content-wrapper .brx-image-title-text-content-container h2.brx-image-title-text-content-title {
	font-size: var(--font-size-60);
	line-height: 1.1;
	color: #86CDF7;
	margin-bottom: .7em;
}




@media( max-width: 767px ) {
	#brx-image-title-text-wrapper {
		margin: 35px 0!important;
	}

	#brx-image-title-text-wrapper #brx-image-title-text-content-wrapper {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		padding: 0 20px;
	}

	#brx-image-title-text-wrapper #brx-image-title-text-content-wrapper .brx-image-title-text-content-image-container {
		position: relative;
		display: flex;
		flex-direction: column;
		flex-basis: 100%;
		flex: 0 0 100%;
		aspect-ratio: 100 / 75;
		border-radius: 15px;
		max-width: 100%;
		overflow: hidden;
		mask-image: url('images/Tetra - Bricks - Mask image.svg');
		mask-size: cover;
		mask-repeat: no-repeat;
	}
	
	#brx-image-title-text-wrapper #brx-image-title-text-content-wrapper .brx-image-title-text-content-container {
		display: flex;
		font-size: var(--font-size-24);
		color: #FFFFFF;
		flex-direction: column;
		flex-basis: 100%;
		flex: 0 0 100%;
		padding: 40px;
		border-radius: 15px;
	}

	#brx-image-title-text-wrapper #brx-image-title-text-content-wrapper .brx-image-title-text-content-container h2.brx-image-title-text-content-title {
		font-size: var(--font-size-32);
		line-height: 1.1;
		color: #86CDF7;
		margin-bottom: .7em;
	}
}
				

@media only screen
  and (min-width: 768px) 
  and (max-width: 1200px) 
  and (orientation: portrait) {
	  #brx-image-title-text-wrapper {
		margin: 35px 0!important;
	}

	#brx-image-title-text-wrapper #brx-image-title-text-content-wrapper {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		padding: 0 20px;
	}

	#brx-image-title-text-wrapper #brx-image-title-text-content-wrapper .brx-image-title-text-content-image-container {
		position: relative;
		display: flex;
		flex-direction: column;
		flex-basis: 100%;
		flex: 0 0 100%;
		aspect-ratio: 100 / 75;
		border-radius: 15px;
		max-width: 100%;
		overflow: hidden;
		mask-image: url('images/Tetra - Bricks - Mask image.svg');
		mask-size: cover;
		mask-repeat: no-repeat;
	}
	
	#brx-image-title-text-wrapper #brx-image-title-text-content-wrapper .brx-image-title-text-content-container {
		display: flex;
		font-size: var(--font-size-24);
		color: #FFFFFF;
		flex-direction: column;
		flex-basis: 100%;
		flex: 0 0 100%;
		padding: 40px;
		border-radius: 15px;
	}

	#brx-image-title-text-wrapper #brx-image-title-text-content-wrapper .brx-image-title-text-content-container h2.brx-image-title-text-content-title {
		font-size: var(--font-size-32);
		line-height: 1.1;
		color: #86CDF7;
		margin-bottom: .7em;
	}
}



@media only screen
  and (min-width: 768px) 
  and (max-width: 1200px) 
  and (orientation: landscape) {
	  #brx-image-title-text-wrapper #brx-image-title-text-content-wrapper .brx-image-title-text-content-container {
		  padding: 50px;
	  }
	  
	  #brx-image-title-text-wrapper #brx-image-title-text-content-wrapper .brx-image-title-text-content-container h2.brx-image-title-text-content-title {
		  font-size: var(--font-size-42);
	  }
	  
	  #brx-image-title-text-wrapper #brx-image-title-text-content-wrapper .brx-image-title-text-content-container {
		  max-width: 33.33333%;

}