/* MENU PAGE */

.main-menu{
	padding: 20px 0 150px;
}

.menu-hero__inner{
	text-align:center;
}

.menu-hero__title{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:18px;
	margin:20px 0 38px;
	color:var(--red);
	font-family:var(--font-primary);
	font-size:55px;
	font-weight:700;
	line-height:1;
	letter-spacing:8px;
}

.menu-hero__title span{
	width:90px;
	height: 7px;
    border-radius: 40px;
	background:var(--red);
}

.menu-hero__image{
	width:100%;
}

.menu-page{
	margin-top:55px;
}

.menu-categories{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:0;
	width: 100%;
	margin:0 auto 70px;
	border-top:1px solid var(--red);
	border-left:1px solid var(--red);
}

.menu-categories a{
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:50px;
	padding:5px 8px;
	border-right:1px solid var(--red);
	border-bottom:1px solid var(--red);
	color:var(--red);
	font-family:var(--font-primary);
	font-size:22px;
	font-weight:700;
	line-height:1;
	text-align:center;
	text-decoration:none;
	transition:var(--transition);
}

.menu-categories a:hover{
	background:var(--red);
	color:var(--white);
}

.menu-category{
	margin-top:80px;
	scroll-margin-top:120px;
}

.menu-category__title{
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:44px;
	margin:0 0 55px;
	border:1px solid var(--red);
	color:var(--red);
	font-family:var(--font-primary);
	font-size:30px;
	font-weight:700;
	line-height:1;
	text-align:center;
}

.menu-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:28px;
}

.menu-card{
	background:transparent;
}

.menu-card__title{
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:56px;
	padding:8px 12px;
	background:var(--red);
	color:var(--white);
	font-family:var(--font-primary);
	font-size:26px;
	font-weight:700;
	line-height:1;
	text-align:center;
}

.menu-card__media{
	position:relative;
	overflow:hidden;
	background:#ead8c1;
}

.menu-card__media img{
	width:100%;
	aspect-ratio:1/1;
	height:auto;
	object-fit:cover;
}

.menu-card__overlay{
	position:absolute;
	inset:0;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:42px;
	padding:35px;
	background:rgba(0,0,0,.52);
	color:var(--white);
	font-family:var(--font-primary);
	text-align:center;
	opacity:0;
	transition:var(--transition);
}

.menu-card:hover .menu-card__overlay{
	opacity:1;
}

.menu-card__overlay p{
	max-width:280px;
	font-size:25px;
	line-height:1.15;
}

.menu-card__prices{
	display:flex;
	align-items:flex-end;
	justify-content:center;
	gap:45px;
}

.menu-card__prices div{
	display:grid;
	gap:8px;
}

.menu-card__prices span{
	font-size:20px;
}

.menu-card__prices strong{
	font-size:34px;
	font-weight:700;
	line-height:1;
}

/* TABLET */

@media(max-width:1024px){
	.main-menu {
		padding-top:25px;
	}

	.menu-hero__title{
		font-size:38px;
		letter-spacing:6px;
		margin-bottom:30px;
	}

	.menu-hero__title span{
		width:65px;
	}

	.menu-page{
		margin-top:45px;
	}

	.menu-categories{
		grid-template-columns:repeat(3,1fr);
		margin-bottom:55px;
	}

	.menu-category{
		margin-top:65px;
	}

	.menu-category__title{
		min-height:38px;
		margin-bottom:38px;
		font-size:24px;
	}

	.menu-grid{
		grid-template-columns:repeat(2,1fr);
		gap:20px;
	}

	.menu-card__title{
		min-height:48px;
		font-size:22px;
	}

	.menu-card__overlay{
		gap:30px;
		padding:28px;
	}

	.menu-card__overlay p{
		font-size:21px;
	}

	.menu-card__prices strong{
		font-size:29px;
	}
}

/* MOBILE */

@media(max-width:700px){
	.main-menu{
		padding:20px 0 70px;
	}

	.menu-hero__title{
		gap:10px;
		font-size:31px;
		letter-spacing:4px;
		margin:18px 0 25px;
	}

	.menu-hero__title span{
		width:40px;
		height:2px;
	}

	.menu-page{
		margin-top:35px;
	}

	.menu-categories{
		grid-template-columns:repeat(2,1fr);
		margin-bottom:45px;
	}

	.menu-categories a{
		min-height:30px;
		font-size:12px;
	}

	.menu-category{
		margin-top:55px;
		scroll-margin-top:80px;
	}

	.menu-category__title{
		min-height:34px;
		margin-bottom:28px;
		font-size:20px;
	}

	.menu-grid{
		grid-template-columns:repeat(2,1fr);
		gap:10px;
	}

	.menu-card__title{
		min-height:34px;
		padding:6px 8px;
		font-size:14px;
	}

	.menu-card__overlay{
		gap:18px;
		padding:14px;
		opacity:1;
		background:rgba(0,0,0,.46);
	}

	.menu-card__overlay p{
		font-size:14px;
		line-height:1.1;
	}

	.menu-card__prices{
		gap:20px;
	}

	.menu-card__prices span{
		font-size:12px;
	}

	.menu-card__prices strong{
		font-size:20px;
	}
}

@media(max-width:420px){
	.menu-grid{
		grid-template-columns:1fr 1fr;
	}

	.menu-card__overlay p{
		font-size:12px;
	}

	.menu-card__prices strong{
		font-size:18px;
	}
}