:root {
	--article-text-color: rgba(98, 98, 98, 1);
	--paragraph-color: rgba(125, 125, 125, 1);
	--subtitle-color: rgba(180, 173, 158, 1);
	--link-color: rgba(3, 169, 244, 1);
	--background-color: rgba(255, 255, 255, 1);
	--main-font: 'Playfair Display', sans-serif;
	--secondary-font: 'Ubuntu', sans-serif;
}

body {
	font-family: var(--main-font);
	font-size: 14px;
	background-color: var(--background-color);
	line-height: 18.66px;
}

.container {
	width: 906px;
	margin: 0 auto;
}

.header {
	padding-top: 71px;
	padding-bottom: 94px;
}
.header-list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	gap: 99px;
	list-style-type: none;
	text-transform: uppercase;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
.header-link {
	color: rgb(125, 125, 125);
	font-weight: inherit;
	font-weight: 400;
	font-size: 14px;
}
.header-link:hover {
	color: rgb(3, 169, 244);
}

.hero {
	padding-bottom: 66px;
}

.hero-list {
	display: flex;
	flex-wrap: wrap;
	row-gap: 130px;
	-moz-column-gap: 65px;
	column-gap: 65px;
	padding-bottom: 90px;
}
.hero-image {
	margin-bottom: 58px;
}

.hero-item {
	max-width: 420px;
	max-height: 542px;
}

.hero-subtitle {
	font-weight: 300;
	color: var(--article-text-color);
	font-size: inherit;
	text-transform: uppercase;
	padding-left: 6px;
	padding-bottom: 28px;
	font-family: var(--secondary-font);
	color: var(--subtitle-color);
}

.hero-title {
	font-size: 30px;
	color: var(--article-text-color);
	line-height: 100%;
	letter-spacing: 0%;
}

.hero-description {
	color: var(--article-text-color);
	padding-left: 6px;
	padding-top: 44px;
}

.hero-button {
	color: var(--article-text-color);
	padding: 20px 48px;
	background-color: var(--background);
	border: 1px solid var(--article-text-color);
	display: block;
	margin: auto;
	font-family: var(--main-font);
}