@import "@{parenturl}/less/mixins.less";

.dcmo_ba {
	display: grid;
	grid-template-rows: repeat(2,1fr);
	grid-gap: 10px;
	min-height:100%;

	&.wDesc {
		grid-template-rows: repeat(3,1fr);
	}
	&.poster {
		grid-template-rows: 1fr;
	}
	&.side {
		.min({
			grid-template-columns: 1fr 1fr;
		}, 541);
		grid-template-rows: 1fr;
		.max({
			grid-template-rows: 1fr 1fr;
		}, 540);
	}

	.before, .after, .poster {
		position: relative;
		overflow:hidden;

		&::before {
			content: '';
			position: absolute;
			bottom: -1.8em;
			right: -1.7em;
			z-index: 1;
			width: 10em;
			height: 4em;
			background-color: rgba(1, 159, 226, 0.5);
			transform: rotate(-25deg);
		}

		&::after {
			position: absolute;
			bottom: .3em;
			right: 0.8em;
			z-index: 2;
			color: #fff;
		}

		.max({
			&::before {
				bottom: -2.3em;
				right: -2.7em;
			}
			&::after {
				bottom: -.15em;
				right: .2em;
			}
		});
	}

	.before::after { content: 'Before'; }
	.after::after { content: 'After'; }
	.poster::after { content: attr(data-poster-text); }

	img {
		object-fit: cover;
		height: 100%;
		width: 100%;
	}
}