Layout.css

/* -----------------------------------------------------------------------------
   Layout styles for BlueSpice
----------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   Common styles
----------------------------------------------------------------------------- */
/* Items */
.bs-layout-cell.bs-layout-cell-item .bs-layout-cell-title{
	font-size: 16px;
	font-weight: bold;
	display: block;
	padding-bottom: 15px;
}
.bs-layout-cell.bs-layout-cell-item.bs-layout-cell-head .bs-layout-cell-title {
	font-size: 22px;
	padding-bottom: 15px;
	display: block;
}
.bs-layout-cell.bs-layout-cell-content {
}
.bs-layout-cell.bs-layout-cell-item.bs-layout-cell-head .bs-layout-cell-content {
	padding: 25px;
}

/* container */
.bs-layout-container {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.bs-layout-container.bs-layout-space-between {
	justify-content: space-between;
}
.bs-layout-container.bs-layout-space-around {
	justify-content: space-around;
}
.bs-layout-container.bs-layout-space-auto {
	justify-content: space-between;
}
.bs-layout-container.bs-layout-space-start {
	justify-content: flex-start;
}
.bs-layout-container.bs-layout-space-end {
	justify-content: flex-end;
}

/* cell */
.bs-layout-cell {
	padding: 10px;
	margin-bottom: 10px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bs-layout-cell a.image img {
	max-width: 100%;
	height: auto;
}

.bs-layout-cell.bs-layout-cell-image {
	padding: 0px;
}

.bs-layout-cell.bs-layout-cell-image a > img {
	max-width: 100%;
	height: auto;
}

/* -----------------------------------------------------------------------------
   Desktop only styles
----------------------------------------------------------------------------- */
@media all and ( min-width: 1001px ) {
	.bs-layout-container.bs-space-auto {
		justify-content: space-between;
	}
}
/* -----------------------------------------------------------------------------
   Desktop and tablet styles
----------------------------------------------------------------------------- */
@media all and ( min-width: 721px ) {
	.bs-layout-cell {
		width: 100%;
		min-height: 100%;
	}

	.bs-layout-container.bs-contain-col-2 > .bs-layout-cell {
		width: 49%;
	}
	.bs-layout-container.bs-contain-col-3 > .bs-layout-cell {
		width: 32%;
	}
	.bs-layout-container.bs-contain-col-3.colspan-2-left > .bs-layout-cell:nth-child( odd ) {
		width: 66%;
	}
	.bs-layout-container.bs-contain-col-3.colspan-2-right > .bs-layout-cell:nth-child( even ) {
		width: 66%;
	}
	.bs-layout-container.bs-contain-col-4 > .bs-layout-cell {
		width: 23.25%;
	}
	.bs-layout-container.bs-contain-col-4.colspan-2-left > .bs-layout-cell:nth-child( 3n+1 ) {
		width: 48.5%;
	}
	.bs-layout-container.bs-contain-col-4.colspan-2-center > .bs-layout-cell:nth-child( 3n+2 ) {
		width: 48.5%;
	}
	.bs-layout-container.bs-contain-col-4.colspan-2-right > .bs-layout-cell:nth-child( 3n ){
		width: 48.5%;
	}
	.bs-layout-container.bs-contain-col-4.colspan-3-left > .bs-layout-cell:nth-child( odd ) {
		width: 73.75%;
	}
	.bs-layout-container.bs-contain-col-4.colspan-3-right > .bs-layout-cell:nth-child( even ) {
		width: 73.75%;
	}
	.bs-layout-container.bs-contain-col-5 > .bs-layout-cell {
		width: 18.4%;
	}
	.bs-layout-container.bs-contain-col-6 > .bs-layout-cell {
		width: 15%;
	}
}
/* -----------------------------------------------------------------------------
   Tablet only styles
----------------------------------------------------------------------------- */
@media all and ( min-width: 721px ) and ( max-width: 1000px ) {
	.bs-layout-container.bs-space-auto {
		justify-content: space-evenly;
	}
}
/* -----------------------------------------------------------------------------
   Mobile only styles
----------------------------------------------------------------------------- */
@media all and ( max-width: 720px ) {
	.bs-layout-container.bs-space-auto {
		justify-content: space-evenly;
	}

	.bs-layout-container .bs-layout-cell {
		min-width: 100%;
		min-height: 100% !important;
	}
}