:root{
	--font-family: arial;
	--base-font-size: 16px;
	--m-margin-size: 18px;
	--big-margin-size: 80px;

	--color--primary: black;
	--color--secondary: red;
}

body{
	font-family: var(--font-family);
	font-size: 16px;
	font-weight: lighter;
	background-color: #f9f9f9;
}

/*header part*/
header{
	font-size: var(--base-font-size);
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: var(--m-margin-size);
}

header p{
	display: flex;
	align-items: center;
	gap: 8px;
}

header p img {
	width: 16px;
	margin: 0;
}

/*body part*/
section{
	margin: var(--m-margin-size);
}

section ul {
	display: grid;
	gap: 24px;
	grid-template-columns: 1fr;
	padding: 0;
	list-style: none;
}

section ul li:hover {
	transform: translateY(-8px);
}

section ul li {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

h2{
	font-size: var(--base-font-size);
	margin-top: 60px;
	padding-bottom: var(--m-margin-size);
	margin-bottom: 10px;
	line-height: 22px;
}

a:hover {
	cursor: url('img/cursor-click.png'), auto;
}

li p{
	font-size: 32px;
	display: flex;
	gap: 5px;
	align-items: flex-start;
	border-top: solid 1px black;
	padding-block: var(--m-margin-size);
}

.number{
	font-size: var(--base-font-size);
}

img{
	width: 100%;
	margin-bottom: 10px;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
	border-radius: 6px;
}

/*footer part*/
footer{
	margin: 60px 18px 18px 18px;
}

@media (min-width: 768px){

	/*header part*/
	header{
		font-size: 18px;
		margin-inline: var(--big-margin-size);
	}

	/*body part*/
	section{
		margin-inline: var(--big-margin-size);
	}

	section ul {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
	}

	h2{
		font-size: 18px;
		margin-top: var(--big-margin-size);
		margin-bottom: var(--m-margin-size);
		max-width: 50%;
		line-height: 26px;
	}

	li p{
		font-size: 36px;
	}

	.number{
		font-size: 18px;
	}

	/*footer part*/
	footer{
		font-size: 18px;
		margin: 60px 80px 18px 80px;
	}
}