@media(max-width: 500px){
	.grid-recommended{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.header-wrapper .flex-wrapper{
		display: grid;
		grid-template-areas: 'logo' 'phones' 'menu';
		margin: 0 auto;
		max-width: max-content;
	}
	.logo{
		text-align: center;	
	}
	.consultation-form .form-group-1{
		grid-template-columns: repeat(1, minmax(0, 1fr));
		gap: 10px;
	}
	.header-wrapper{
		padding: 10px 0;
	}
	.phone-wrapper-link{
		gap: 5px;
	}
	.phone-wrapper{
		gap: 0;
	}
	footer .logo{
		margin-bottom: 10px;	
	}
	.std-section {
		padding: 25px 0;
	}
	.fancybox__content{
		padding: 15px;
	}
	.menu-wrapper ul{
		margin: 0;
		margin-top: 5px;
	}
}

@media(min-width: 501px) {
	.grid-recommended{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

}

@media(min-width: 501px) and (max-width: 767px) {
	.header-wrapper .flex-wrapper{
		display: grid;
		grid-template-areas: 'logo menu phones';
		gap: 10px;
	}
	.logo span {
		font-size: 22px;
	}
	.header-wrapper .flex-wrapper{
		display: grid;
		grid-template-areas: 'logo menu'
			'phones phones' ;
		grid-template-columns: 1fr 1fr;
		margin: 0 auto;
		max-width: max-content;
		gap: 25px;
	}
}



@media(max-width: 767px) {
	.container {
		max-width: 95%;
		margin: 0 auto;
	}

	.sanatory-hero {
		flex-direction: column;
	}

}

@media(min-width: 768px) {
	.container {
		max-width: 95%;
		margin: 0 auto;
	}
	.grid-recommended{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media(max-width: 1023px) {
	.btn-toggle {
		display: none;
	}
	.logo {
		grid-area: logo;
	}
	.phone-wrapper {
		grid-area: phones;
	}
	.menu-wrapper{
		grid-area: menu;
	}
	.flex-wrapper{
		gap:0;
	}
	.sanatory-hero{
		flex-direction: column;	
	}

}

@media(min-width: 1024px) {
	.sanatory-hero-wrapper{
		margin-bottom: 30px;
	}
	.sanatory-hero{
		margin-bottom: 30px;
	}
	.col-d50 {
		width: 50%;
		max-height: 400px;
		overflow: hidden;
		/* margin-bottom: 50px; */
		transition: max-height 0.4s ease;
	}
	.col-d50.expanded {
		max-height: 100%; 
	}
}

@media(min-width: 1200px){
	.grid-recommended{
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media(min-width: 1400px){
	.grid-recommended{
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

@media(min-width: 1600px) {
	.container {
		max-width: 1400px;
		margin: 0 auto;
	}

}