$o-product-bp1: m;


.o-product {
	display: grid;
	grid-column-gap: column(1,12);
	grid-row-gap: space(4);
	grid-template-columns: auto;
	grid-template-rows: repeat(3, auto);
	grid-template-areas: "content" "figure" "specs";

	@include mq($o-product-bp1) {
		grid-template-columns: 5fr 6fr;
		grid-template-rows: repeat(2, auto);
		grid-template-areas:
			"figure content"
			"specs .";
	}
}


.o-product__figure {
	grid-area: figure;
}


.o-product__content {
	grid-area: content;
}


.o-product__specs {
	grid-area: specs;
}


.o-product__name {
	@include font-size(xl);
	@include font-weight('bold');
	margin-bottom: space(4);
}


.o-product__price {
	@include font-size(xl);
	@include font-weight('bold');
}

.o-product__subprice {
	@include font-size(m);
	margin-top: space(1);
}


.o-product__actions {
	display: flex;
	margin-top: space(4);
}


.o-product__amount {
	margin-right: space(3);
}