/* 다른 페이지로 이동 */
<section>
	<div class="container">
		<div class="row">
			<div class="col-12">
				<h1>Change your career,<br/> Change your life</h1>
				<p>Get ahead with expert-led training in<br/> frontend development</p>
			</div>
				<div class="button-group">
					/* 다른 페이지로 이동 */
					<a href="#" class="fill-button">Apply now</a>
					<a href="#" class="fill-button inverted">Learn more</a>
				</div>
		</div>
	</div>
</section>

<aside> 💡 모바일만 보고 만들기!!!

</aside>

버튼 같은것은 계속 쓰이기 때문에 위쪽에 작성한다.

버튼을 잘 살펴보고 디자이너의 의도가 padding으로 버튼을 만든 것인지 혹은 강제로 width와 height을 통일해서 같은 버튼들을 만든것인지 파악을 먼저 하자.

/* 길이가 140 * 80으로 고정된 버튼 */
.fill-button {
	display : inline-flex;
	justify-content : center;
	align-items : center;
	width : 140px;
	height : 48px;
	font-size : 15px;
	font-weight : 700;
	line-height : 1.6;
	letter-spacing : -0.05em;
	color : #fff;
	background-color : #3040c4
}

/* 같은 사이즈에 색상이 반전된 버튼 */
/* class명이 fill-button 이면서 inverted인 버튼 */

.fill-button.inverted {
	background-color : #fff;
	color : #3040c4;
}

.landing .button-group {
	display : flex;
	justify-content : 
}

/* landing 안에 button-group안에 fill-button의 첫번째 자식요소 */
.landing .button-group .fill-button:first-child {
	margin-right : 8px;
}

전체 면적을 채우는법

1. padding top, padding bottom으로 늘리기
2. vh로 늘리기

@media screen and (min-width : 768px){
	p{
		font-size : 22px;
		line-height : 1.363636363;
	}
	
	.fill-button {
		width : 160px;
		height : 56px;
		font-size : 18px;
		line-height : 1.55555666;
}

	/* landing */
	.landing-title {
		font-size : 70px;
		line-height : 1.0285714286;
	}
}

/* 데스크랍 시안에는 전체 영역을 height : auto; padding-top 과 padding-bottom을 준다. */

형제요소 사이의 간격은 형제요소에게 margin을 줘야한다.

자식요소에게 margin을 주면 맡지 않는다.

.service .col-12:first-child {
	margin-bottom : 40px;
}