greenfox07

<div class="lookbook-cards">
	<a href="#" class="card col-3">
		<span class="small-price"><sup>ref</sup>m1</span>
		<img src="img/cards/lookbook/photo-1.jpg" alt="">
	</a>
	<a href="#" class="card col-3">
		<span class="small-price"><sup>ref</sup>w1</span>
		<img src="img/cards/lookbook/photo-2.jpg" alt="">
	</a>
	<a href="#" class="card col-6">
		<img src="img/cards/lookbook/photo-3.jpg" alt="">
	</a>

	<a href="#" class="card col-3">
		<span class="small-price"><sup>ref</sup>w1</span>
		<img src="img/cards/lookbook/photo-4.jpg" alt="">
	</a>
	<a href="#" class="card col-3">
		<span class="small-price"><sup>ref</sup>w1</span>
		<img src="img/cards/lookbook/photo-5.jpg" alt="">
	</a>
	<a href="#" class="card col-3">
		<span class="small-price"><sup>ref</sup>w1</span>
		<img src="img/cards/lookbook/photo-6.jpg" alt="">
	</a>
	<a href="#" class="card col-3">
		<span class="small-price"><sup>ref</sup>w1</span>
		<img src="img/cards/lookbook/photo-7.jpg" alt="">
	</a>
				
	<a href="#" class="card col-9">
		<img src="img/cards/lookbook/photo-8.jpg" alt="">
	</a>
	<a href="#" class="card col-3">
		<span class="small-price"><sup>ref</sup>w1</span>
		<img src="img/cards/lookbook/photo-9.jpg" alt="">
	</a>
</div>

.lookbook-cards {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	padding-bottom: 52px;
	margin: 0 -10px;

	&::after {
		.line;
		bottom: 0;
	}
}

.col-3 {
  flex: 1 0 0;
  max-width: 25%;
  margin: 10px 10px;
}
.col-6 {
  flex: 2 0 0;
  max-width: 50%;
  margin: 10px 10px;
}
.col-9 {
  flex: 3 0 0;
  max-width: 75%;
  margin: 10px 10px;
}