.sr-module {
	position:relative;
	display:flex;
}
.sr-full-bg {
	position:absolute;top:0;left:0;right:0;bottom:0;
}

.sr-full-bg img {
	opacity:0;
	visibility:hidden;
	transition:all 1s;
}

.sr-full-bg img.active {
	opacity:1;
	visibility:visible;
}

.sr-tile {
	box-sizing:border-box;
	position:relative;
	min-height:clamp(200px, 50vh, 500px);
	display:flex;
	flex-direction:column;
	justify-content: space-between;
	padding:20px;
	transition:all 0.5s;
}

.sr-mc1 .sr-tile { flex-basis:100%; }
.sr-mc2 .sr-tile { flex-basis:calc(100% / 2); }
.sr-mc3 .sr-tile { flex-basis:calc(100% / 3); }
.sr-mc4 .sr-tile { flex-basis:calc(100% / 4); }
.sr-mc5 .sr-tile { flex-basis:calc(100% / 5); }
.sr-mc6 .sr-tile { flex-basis:calc(100% / 6); }

.sr-tile-bg {
	position:absolute;top:0;left:0;right:0;bottom:0;
	display:none;
}

.sr-tile-overlay {
	position:absolute;top:0;left:0;right:0;bottom:0;
	opacity:0;
	background:#00000066;
	transition:all 1s;
}

.active .sr-tile-overlay { opacity:1; }

.sr-full-bg img,
.sr-tile-bg img {
	position:absolute;top:0;left:0;right:0;bottom:0;
	width:100%;
	height:100%;
	display:block;
	object-fit:cover;
}

.sr-title {
	position:relative;
	color:#fff;
	text-transform:uppercase;
	text-align:right;
	font-size:19px;
}
.sr-content {
	color:#fff;
	position:relative;
	text-align:right;
	transition:all 0.2s;
	opacity:0;
}
.sr-tile.active {
	background:#00000022;
}
.sr-tile.active .sr-content {
	opacity:1;
}

@media screen and (max-width:960px) {
	.sr-full-bg { display:none; }
	.sr-tile-bg { display:block; }
	.sr-module { flex-wrap:wrap; gap:5px;}
	.sr-module .sr-tile {
		flex:1 0 calc(50% - 5px / 2);
	}
}

@media screen and (max-width:560px) {
	.sr-tile {
		min-height:clamp(200px, 33vh, 400px);
	}
	.sr-module .sr-tile {
		flex:1 0 100%;
	}

}