wine-facts/css/main.css

@font-face {
	font-family: Prociono;
	src: url('../font/Prociono.ttf');
	font-display: swap;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: Prociono;
}

.content {
	max-width: 900px;
	margin: 50px auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 10px;
	grid-auto-rows: minmax(50px, auto);
}

section {
	margin-bottom: 30px;
}

h4 {
	font-size: 22px;
	margin-bottom: 10px;
}

.main {
	grid-column: 1;
	grid-row: 1;
}

.main > img {
	width: 100%;
}

.details {
	grid-column: 2;
	grid-row: 1;
	margin-top: auto;
	margin-bottom: 35px;
	margin-left: 20px;
	letter-spacing: 0.35em;
	line-height: 1.6;
}

.name {
  margin-bottom: 10px;
}

.ingredients {
	grid-column: 1 / 3;
	grid-row: 2;
}

.facts {
	grid-column: 1 / 3;
	grid-row: 3;
}

table {
	border-collapse: collapse;
	width: 100%;
}

tr:nth-child(odd) {
	background-color: ButtonFace;
}

td {
	padding-left: 10px;
}

td > .marged {
	margin-left: 20px;
}

/*Nav*/

li {
	list-style: none;
}

.lang {
	display: flex;
	align-items: center;
	padding-right: 100px;
}

.lang img {
  width: 60px;
	margin-left: 10px;
}

.mega-menu a {
	display: block;
	color: grey;
	text-decoration: none;
}

.mega-menu a:hover {
	background: lightgrey;
}

.mega-menu-main {
	display: flex;
	position: relative;
	background: white;
	flex-direction: row-reverse;
}

.lvl-0 > a {
	padding: 12px 25px;
}

.lvl-0:hover > ul {
	display: flex;
}

.mega-menu-tab {
	display: none;
  /*display: flex;*/
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	background: white;
}

.lvl-1 {
	flex: 1;
	width: 100%;
	margin: 0 15px;
}

.lvl-1 h2 {
	margin: 0;
	padding: 0;
	color: white;
}

.lvl-2 {
	padding-top: 15px;
}

.lvl-2 a {
	padding: 8px 0;
}

@media(max-width:950px) {
	.content {
		max-width: 700px;
	}

	.details {
		letter-spacing: 0.2em;
	}
}

@media(max-width:750px) {
	.content {
		max-width: 600px;
	}

	.details {
		letter-spacing: 0.1em;
	}
}

@media(max-width:650px) {
	.content {
		max-width: max-content;
		margin-left: 20px;
		margin-right: 20px;
	}

	.main {
		grid-column: 1 / 3;
		grid-row: 2;
		text-align: center;
	}

	.main > img {
		width: 75%;
	}

	.details {
		grid-column: 1 / 3;
		grid-row: 1;
		text-align: center;
		letter-spacing: 0.35em;
	}

	.ingredients {
		grid-row: 3;
	}

	.facts {
		grid-column: 1 / 3;
		grid-row: 4;
	}
}

@media(max-width:500px) {

	.details {
		letter-spacing: 0.2em;
	}
}