.content
{
	width: var(--contentWidth);
	margin: 0 auto;
}



/****************************************************************/
/* content alignment                                            */
/****************************************************************/
.left
{
	text-align: left;
}

.center
{
	text-align: center;
}

.right
{
	text-align: right;
}



/****************************************************************/
/* multi-column                                                 */
/****************************************************************/
.row::after
{
	content: "";
	display: table;
	clear: both;
}

.row .col
{
	float: left;
	width: calc(100% / var(--column-count, 1));
}



/****************************************************************/
/* page cover                                                   */
/****************************************************************/
#pageCover
{
	width: max(var(--contentWidth), 100%);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;

	position: relative;
	display: block;
}

#pageCoverContent
{
	height: var(--cover-height);
}

#pageCover::before
{
	content: "";

	background-color: var(--pageMenu-backgroundColor);
	background-blend-mode: multiply;
	-webkit-mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
	mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);

	display: block;
	width: 100%;
	height: var(--pageMenu-fadeHeight);
}

/****************************************************************/
/* inset                                                        */
/****************************************************************/
.inset
{
	padding: 0 0;
	width: max(var(--contentWidth), 100%);
	background-image: var(--bg, none);
	background-repeat: no-repeat;
	background-position: center;
}

.alignBackgroundTop
{
	background-position: center var(--tear-height);
}

.limitBackgroundToContentWidth
{
	background-size: var(--contentWidth) auto !important;
}

/****************************************************************/
/* tear decorations                                             */
/****************************************************************/
.inset::before,
.inset::after,
#footer::before,
#pageCover::after
{
	content: "";

	background-color: var(--backgroundColor);
	background-blend-mode: multiply;
	background-repeat: repeat-x;

	position: static;

	display: block;
	width: 100%;
	height: var(--tear-height);
}

.inset::before,
#footer::before
{
	mask: var(--tear-top);
	-webkit-mask: var(--tear-top);
	margin-top: 0;
	margin-bottom: var(--tear-margin);
}

.inset::after,
#pageCover::after
{
	mask: var(--tear-bottom);
	-webkit-mask: var(--tear-bottom);
	margin-top: var(--tear-margin);
	margin-bottom: 0;
}