@media screen and (max-width: 1420px){
	.container{padding: 0 16px}
	.grid.grid-5 {
		grid-template-columns: repeat(4, 1fr);
	}
}


@media screen and (max-width: 1100px){
	.section{padding: 40px 0;}

	.grid.grid-5 {
		grid-template-columns: repeat(3, 1fr);
	}
	header{background: transparent; position: absolute; top: 0; left: 0; width: 100%;}
	header nav{display: none;}
	header .phone{position: fixed; bottom: 16px;right: 16px; z-index: 500;}
	header .phone a{font-size: 0; display: flex; align-items: center; justify-content: center; background: var(--yellow) url("../img/phone.svg") 50% 50% no-repeat; width: 55px; height: 55px; border-radius: 50%; padding: 0; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);}
	header .logo{display: flex; align-items: center; justify-content: flex-start; gap: 20px;}
	header .logo .instagram{display: flex;}
	header .logo .instagram svg{width: 30px; height: 30px; position: relative; top: 10px;}
	header .pull{display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;}
	header .pull svg{width: 20px; height: 20px;}
	header .pull.open svg{opacity: 0;}
	header .pull.open{background: url("../img/close.svg") 50% 50% no-repeat;}
	header nav{position: absolute; top: 100%; left: 0; width: 100%; background: var(--bg);}
	header nav ul{display: block;}
	header nav ul li:last-child{display: none;}
	header nav ul li a{display: block; padding: 10px 16px; font-weight: normal;}



	#promo .swiper-slide{min-height: 0; height: auto;}
	#promo .data{padding: 0}
	#promo .swiper-slide img{height: 500px}


	#about .info{width: 100%; text-align: center; margin-bottom: 24px;}
	#about .data{width: 100%; text-align: center;}


	.product__item img{height: auto;}
	.product__item p{font-size: 12px;}


	#action{padding: 50px 0;}


	#videos{display: none;}



	footer{font-size: 14px; padding-bottom: 70px}
	footer nav ul{gap: 10px}
	footer ul li{width: 100%;}
}



@media screen and (max-width: 767px){
	.bt{font-size: 24px;}


	#promo .swiper-slide{height: 575px}
	#promo .swiper-slide img{height: 575px;}
	#promo .data{padding: 0 16px 40px; align-items: flex-end; box-sizing: border-box;}
	#promo .data .inn{width: 100%; max-width: 100%; position: relative; top: -50px}
	#promo .data h1{font-size: 20px;}
	#promo .data h2{font-size: 28px;}


	#about{padding-top: 0}
	#about .info,#about .data{text-align: left;}


	.product__item p{font-size: 16px; line-height: 1.5;}



	#faq .bt{text-align: center;}
	#faq .list__faq{width: 100%; margin-bottom: 24px;}
	#faq .image{width: 100%;}


	#contacts .grid{grid-template-columns: repeat(1, 1fr);}


	.grid{grid-template-columns: repeat(1, 1fr)!important;}


	footer nav, footer .text{width: 100%;}
	footer nav{margin-bottom: 24px;}
}