<div class="big">
	 <article class="recipe">
		<div class="pizza-box">
			<img src="https://brotokoll.com/wp-content/uploads/2019/12/xPSX_20190928_134709.jpg.pagespeed.ic.qsjw5ilFw5.jpg" width="1500" height="1368" alt="">
		</div>
		<div class="recipe-content">
			<p class="recipe-tags">
				<span class="recipe-tag">Gluten Free</span>
				<span class="recipe-tag">Main dish</span>
			</p>

			<h1 class="recipe-title"><a href="#">Gluten Free Pan Pizza</a></h1>

			<p class="recipe-metadata">
				<span class="recipe-rating">★★★★<span>☆</span></span>
				<span class="recipe-votes">(12 votes)</span>
			</p>

			<p class="recipe-desc">It really is possible to make excellent gluten free pizza at home in your own oven with our recipes and techniques.</p>

			<button class="recipe-save" type="button">
				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#000000"><path d="M 6.0097656 2 C 4.9143111 2 4.0097656 2.9025988 4.0097656 3.9980469 L 4 22 L 12 19 L 20 22 L 20 20.556641 L 20 4 C 20 2.9069372 19.093063 2 18 2 L 6.0097656 2 z M 6.0097656 4 L 18 4 L 18 19.113281 L 12 16.863281 L 6.0019531 19.113281 L 6.0097656 4 z" fill="currentColor"/></svg>
				Save
			</button>

		</div>
	</article>
</div>

 <div class="small">
	 <article class="recipe">
		<div class="pizza-box">
			<img src="https://brotokoll.com/wp-content/uploads/2019/12/xPSX_20190928_134709.jpg.pagespeed.ic.qsjw5ilFw5.jpg"  width="1500" height="1368" alt="">
		</div>
		<div class="recipe-content">
			<p class="recipe-tags">
				<span class="recipe-tag">Gluten Free</span>
				<span class="recipe-tag">Main dish</span>
			</p>

			<h1 class="recipe-title"><a href="#">Gluten Free Pan Pizza</a></h1>

			<p class="recipe-metadata">
				<span class="recipe-rating">★★★★<span>☆</span></span>
				<span class="recipe-votes">(12 votes)</span>
			</p>

			<p class="recipe-desc">It really is possible to make excellent gluten free pizza at home in your own oven with our recipes and techniques.</p>

			<button class="recipe-save" type="button">
				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#000000"><path d="M 6.0097656 2 C 4.9143111 2 4.0097656 2.9025988 4.0097656 3.9980469 L 4 22 L 12 19 L 20 22 L 20 20.556641 L 20 4 C 20 2.9069372 19.093063 2 18 2 L 6.0097656 2 z M 6.0097656 4 L 18 4 L 18 19.113281 L 12 16.863281 L 6.0019531 19.113281 L 6.0097656 4 z" fill="currentColor"/></svg>
				Save
			</button>

		</div>
	</article>
</div>

.recipe,
.pizza-box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.pizza-box {
	flex: 3 1 30ch;
	height: calc(282px + 5vw);
	overflow: hidden;

	img {
		max-width: 100%;
		min-height: 100%;
		width: auto;
		height: auto;
		object-fit: cover;
		object-position: 50% 50%;
	}
}

.recipe {
	border: 2px solid #F2F2F2;
	border-radius: 8px;
	overflow: hidden;
	
	&-content {
		padding: 16px 32px;
		flex: 4 1 40ch;
	}
	
	&-tags {
		margin: 0 -8px;
	}

	&-tag {
		display: inline-block;
		margin: 8px;
		font-size: .875em;
		text-transform: uppercase;
		font-weight: 600;
		letter-spacing: .02em;
		color: var(--primary);
	}
	
	&-title {
		margin: 0;
		font-size: clamp(1.4em, 2.1vw, 2.1em);
		font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
		
		a {
			text-decoration: none;
			color: inherit;
		}
	}
	
	&-metadata {
		margin: 0;
	}
	
	&-rating {
		font-size: 1.2em;
		letter-spacing: 0.05em;
		color: var(--primary);
		
		span {
			color: var(--grey);
		}
	}
	
	&-votes {
		font-size: .825em;
		font-style: italic;
		color: var(--lightgrey);
	}
	
	&-save {
		display: flex;
		align-items: center;
		padding: 6px 14px 6px 12px;
		border-radius: 4px;
		border: 2px solid currentColor;
		color: var(--primary);
		background: none;
		cursor: pointer;
		font-weight: bold;
		
		svg {
			margin-right: 6px;
		}
	}
}



/* Body Layout */
* {
	box-sizing: border-box;
}

body {
	--primary: #E05D26;
	--grey: #454545;
	--lightgrey: #666;
	
	color: var(--grey);
	line-height: 1.55;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	font-family: "Roboto", Helvetica, Arial, sans-serif;
}

.big {
	width: clamp(320px, 65%, 65%);
	padding: 24px;
}
.small {
	width: clamp(320px, 35%, 480px);
	padding: 24px;
}