<main>
    <section class="introduce">
        <img class="champagne" src="champagne.png">
        <div>
	    <h1>Champagne<br>bottles</h1>    
	    <p>Champagne is mostly fermented in two sizes of bottles, 
	    standard bottles (750 millilitres) and magnums (1.5 litres). 
	    In general, magnums are thought to be higher quality, 
	    as there is less oxygen in the bottle, 
	    and the volume-to-surface area ratio favours 
	    the creation of appropriately sized bubbles.</p>
	</div>
    </section>
    <section class="major">
        <dl class="detail">
	    <div class="flex">
		<dt>Capacity</dt>
		<dd>750ml</dd>
	    </div>
            <div class="flex">
		<dt>Region</dt>
		<dd>France</dd>
	    </div>
	</dl>
	<h2 class="price">53.43</h2>
    </section>
</main>





				

/* Web Fonts */
	Web Fonts 부분은 영상을 참고하여 직접 작성해 보세요!
	웹폰트 적용하는 방법에 익숙해집니다.

/* CSS Resets */
	CSS Resets 부분은 영상을 참고하여 직접 작성해 보세요!
	HTML 요소와 친밀해지는 시간입니다.
	
/* Desgin Areas */
.flex {
	display: flex;
}

section {
	padding: 50px;
}

/* Desgin Areas */
body {
	font-family: 'Kumbh Sans', sans-serif;
	font-size: 20px;
	font-weight: 200;
	background-color: #333;
}

main {
	width: 700px;
	margin: 150px auto 0;
}

.introduce {
	background-color: #ffe5af;
}

.introduce h1 {
	font-family: 'Cinzel Decorative', cursive;
	font-size: 4rem;
	line-height: 1.1;
	margin: 5px 0 30px;
}

.introduce .champagne {
	width: auto;
	height: 680px;
	float: right;
	shape-outside: polygon(56px 10px, 48px 152px, -10px 400px, -10px 770px, 200px 770px);
}

.major {
	background-color: #72cd6a;
	font-weight: 400;
	color: #22401f;
}

.major .detail {
	font-size: 1.6rem;
	line-height: 1.6;
}

.detail dt:after {
	content: ' :';
	margin-right: 10px;
}

.price {
	margin-top: 20px;
	font-size: 4rem;
}

.price:before {
	content: '$';
}