* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;

	a {
		text-decoration: none;
		color: #000000;
	}

	li {
		list-style: none;
	}
}

:root {
	--font-family: "Lato", sans-serif;
	--second-family: "Red Hat Display", sans-serif;
	--gray: #565656;
}

html {
	font-family: var(--font-family);
	line-height: 166%;
	letter-spacing: 0.05em;
	color: var(--gray);

}

img {
	display: block;
}

h1 {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

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

:link,
:visited {
	text-decoration: none;
	color: inherit;
}

.header .container {
	display: flex;
	padding-block: 44px;
	align-items: center;
	gap: 84px;



	.logo {
		margin-right: auto;
	}

	ul {
		display: flex;
		gap: 42px;
		text-transform: uppercase;
	}

	ul li a {
		position: relative;
	}

	ul li a:after {
		content: "";
		position: absolute;
		bottom: -2px;
		left: 50%;
		width: 0;
		height: 2px;
		background-color: #000000;
		transition: all 0.3s ease;
	}

	ul li a:hover::after {
		width: 100%;
		left: 0;
	}

	button {
		background-color: #FFFFFF;
		border: none;
	}

	.burger {
		width: 34px;
		height: 25px;
		background-color: black;
		/* position: relative; */
		/* background-image: repeating-linear-gradient(black 0, black 2px, transparent 2px, transparent 10px); */
		display: none;
		transition: filter 500ms;

		&::before {
			content: "";
			display: block;
			width: 34px;
			height: 5px;
			background-color: white;
			translate: 0 5px;
			transition: rotate 500ms, translate 500ms;
		}

		&::after {
			content: "";
			display: block;
			width: 34px;
			height: 5px;
			background-color: white;
			translate: 0 10px;
			transition: rotate 500ms, translate 500ms;
		}


	}


}




.hero {
	height: 600px;

	h2 {
		max-width: 770px;
		font-size: 48px;
		font-family: var(--second-family);
		font-weight: 600;
		line-height: 133%;
		letter-spacing: 0.05em;
		color: #000;
	}

	img {
		width: 100%;
		height: 100%;
		margin-bottom: -500px;
		object-fit: cover;
		object-position: bottom;
	}
}

.blog .container {
	padding-block: 90px;

	h2 {
		font-family: var(--second-family);
		font-weight: 400;
		font-size: 48px;
		line-height: 133%;
		letter-spacing: 0.05em;
		color: #000;
	}

	>div {
		display: flex;
		gap: 30px;
		margin-top: 50px;

		&:last-child {
			flex-direction: row-reverse;
		}

		.text {
			padding-block: 85px;
			width: 450px;

			p:first-of-type {
				font-family: var(--font-family);
				font-weight: 400;
				font-size: 16px;
				line-height: 166%;
				letter-spacing: 0.1em;
				color: #7b7b7b;
				margin-bottom: 30px;
			}

			h3 {
				margin-bottom: 15px;
				font-family: var(--second-family);
				font-weight: 500;
				font-size: 22px;
				line-height: 166%;
				letter-spacing: 0.1em;
				color: #000;
			}
		}

		div {
			margin-bottom: 50px;
		}

		img {
			vertical-align: middle;
			display: inline-block;
		}
	}
}


.posts .container {

	header {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.arrow {
			display: flex;
			align-items: center;
			gap: 20px;
		}


		h2 {
			font-family: var(--second-family);
			font-weight: 600;
			font-size: 28px;
			line-height: 166%;
			letter-spacing: 0.1em;
			color: #000;
		}



		a {
			font-weight: 400;
			font-size: 16px;
			line-height: 166%;
			letter-spacing: 0.1em;
			color: #7b7b7b;
		}

	}


	ul {
		display: flex;
		gap: 30px;
		margin-top: 50px;
	}

	ul li h3 {
		font-family: var(--second-family);
		font-weight: 500;
		line-height: 166%;
		letter-spacing: 0.1em;
		color: #000;
		font-size: 22px;
		margin-bottom: 20px;
	}

	ul li .meta {
		display: flex;
		justify-content: space-between;
		margin-block: 25px;
	}

	p {
		font-weight: 400;
		font-size: 16px;
		line-height: 166%;
		letter-spacing: 0.05em;
		color: #565656;
	}
}

.popular .container {
	padding-block: 90px;

	header {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.arrow {
			display: flex;
			align-items: center;
			gap: 20px;
		}

		h2 {
			font-family: var(--second-family);
			font-weight: 600;
			font-size: 28px;
			line-height: 166%;
			letter-spacing: 0.1em;
			color: #000;
		}



		a {
			font-weight: 400;
			font-size: 16px;
			line-height: 166%;
			letter-spacing: 0.1em;
			color: #7b7b7b;
		}
	}

	ul {
		display: flex;
		gap: 30px;
		margin-top: 50px;

		li div {
			display: flex;
			justify-content: space-between;
			margin-block: 20px;
		}

		li h3 {
			font-family: var(--second-family);
			font-weight: 500;
			line-height: 166%;
			letter-spacing: 0.1em;
			color: #000;
			font-size: 22px;
			margin-bottom: 20px;
		}

		li p {
			font-weight: 400;
			font-size: 16px;
			line-height: 166%;
			letter-spacing: 0.05em;
			color: #565656;
		}
	}

	button {
		font-weight: 700;
		background-color: #565656;
		font-size: 16px;
		line-height: 166%;
		letter-spacing: 0.1em;
		color: #fff;
		padding: 10px 45px;
		border: none;
		display: block;
		margin: auto;
	}
}

.info .container {
	display: flex;
	gap: 230px;
	padding-bottom: 90px;

	h3 {
		font-family: var(--second-family);
		font-weight: 400;
		font-size: 23px;
		line-height: 166%;
		letter-spacing: 0.1em;
		color: #000;
		max-width: 470px;
	}

	img {
		margin-top: 20px;
	}

	p {
		font-weight: 400;
		font-size: 19px;
		line-height: 168%;
		letter-spacing: 0.05em;
		color: #565656;
		max-width: 470px;
	}

	p:first-child {
		margin-bottom: 50px;
	}

}

footer .container {
	position: relative;
	padding-block: 70px;

	&::before {
		content: '';
		position: absolute;
		width: 200vw;
		height: 100%;
		background-color: #f4f4f4;
		top: 0;
		left: -100vw;
		z-index: -1;
	}


	>div {
		display: flex;
		justify-content: space-between;
		align-items: center;

		h3 {
			font-family: var(--second-family);
			font-weight: 400;
			font-size: 48px;
			line-height: 133%;
			letter-spacing: 0.05em;
			color: #000;
			margin-bottom: 30px;
		}

		a {
			display: block;
			font-weight: 400;
			font-size: 16px;
			line-height: 166%;
			letter-spacing: 0.1em;
			color: #000;
		}

		/* a:last-child {
			padding-top: 15px;
		} */

		ul {
			display: flex;
			gap: 23px;


			li a {
				svg {
					display: block;
					transition: 1s;
				}

				&:hover>svg {
					background-color: #565656;
				}

				&:hover {
					[fill="#565656"] {
						fill: #f4f4f4;
					}
				}
			}
		}
	}

	p {
		text-align: center;
		padding-top: 20px;
	}
}



@media (max-width: 1200px) {
	.container {
		width: unset;
		padding: 0 34px;
	}

	.header .container {
		position: relative;

		:not(:checked)+nav {
			display: none;
		}

		nav {
			position: absolute;
			top: 100%;
			right: 0;
			background: white;
			border-radius: 8px;
			padding: 5px;

			ul {
				display: unset;
			}
		}

		.burger {
			display: unset;
		}

		:checked~.burger {
			filter: invert(1);

			&::before {
				content: "";
				/* background-color: #000000; */
				rotate: 32deg;
				translate: 0 10px;
			}

			&::after {
				content: "";
				/* background-color: #000000; */
				rotate: -32deg;
				translate: 0 5px;
			}


			/* background-image: unset; */
			/* position: relative; */

			/* &::before,
			&::after {
				content: "";
				display: block;
				width: 100%;
				height: 2px;
				background: black;
				position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
				rotate: -32deg;
			}

			&::after {
				rotate: 32deg;
			} */
		}
	}

	.blog .container {
		>div {
			gap: 20px;

			>* {
				width: calc(50% - 10px);

			}

			.text {
				width: unset;

				img {
					padding-left: 5px;
				}
			}


		}
	}

	.posts .container {


		ul {
			display: unset;

			li {
				display: flex;
				gap: 20px;
				padding-top: 50px;

				>* {
					width: calc(50% - 10px);
				}

				&:nth-child(2n) {
					flex-direction: row-reverse;
				}

				.meta {
					margin-top: unset;
				}
			}


		}
	}

	.popular .container {

		ul {
			gap: 20px;

			li {
				width: calc(50% - 10px);
			}

			img {
				width: 100%;
			}

		}
	}

	.info .container {
		flex-direction: column;
		gap: 40px;


		p {
			max-width: 628px;
			text-align: right;
		}

		div:last-child {
			align-self: end;
		}
	}

	footer .container {
		padding-block: 50px;

		>div {
			display: unset;
			text-align: center;

			ul {
				justify-content: center;
			}
		}

	}

}

@media (max-width: 760px) {
	.container {
		padding: 0 10px;
	}



	.blog .container {


		h2 {
			text-align: center;
			margin-bottom: 50px;
		}


		>div {
			display: flex;
			flex-direction: column-reverse;

			&:last-child {
				flex-direction: column-reverse;
			}

			img {
				width: 100%;
			}

			.text {
				padding-block: unset;

				.ar {
					display: none;
				}
			}
		}
	}

	.posts .container {

		header {
			display: unset;
		}

		ul {

			li {
				display: flex;
				flex-direction: column;
				width: 100%;


				img {
					width: 100%;
				}

				&:nth-child(2n) {
					flex-direction: column;
				}

				div {
					width: 100%;
				}
			}
		}
	}

	.popular .container {

		header {
			display: unset;
		}

		ul {
			display: flex;
			flex-direction: column;

			li {
				width: 100%;
				margin-bottom: 50px;
			}
		}
	}

	.info .container {

		p {
			text-align: unset;
		}

		div:last-child {
			align-self: unset;
		}
	}


}