$o-details-bp1: 1100;

.o-details {
	@include mq($o-details-bp1) {
		@include template(main, side);
		display: grid;
		grid-template-columns: 8fr 0.5fr minmax(#{space(40)},3.5fr);
		grid-template-rows: 1fr;
		grid-template-areas: 'main . side';
	}
}

.o-details--reversed {
	@include mq($o-details-bp1) {
		grid-template-columns: minmax(#{space(40)},3.5fr) 0.5fr 8fr;
		grid-template-rows: 1fr;
		grid-template-areas: 'side . main';
	}
}


.o-details__side {
	filter: drop-shadow(0 20px 48px rgba(0,0,0,0.08));

	@include mq($max: $o-details-bp1) {
		max-width: 24em;
		margin: space(6) auto 0;

	}
}

.o-details__main {

}

.o-details__desc {
	max-width: 42em;
	margin-top: space(5);
	margin-bottom: space(8);

	.o-details--reversed &{
		@include mq($o-details-bp1) {
			margin-left: auto;
		}
	}
}