@media only screen  and (max-width: 1025px) {
	.image-border {
	    width: calc((100% - 20px) / 4);
	}
}
@media only screen and (max-width: 950px){
	.products-cards{
		justify-content: center;
	}
	.products-cards .card {
	    width: 70%;
	}
	.products-cards .card.card-psoriaz {
	    width: 70%;
	}
	.image-border {
	    width: calc((100% - 20px) /3);
	}
}
@media only screen and (max-width: 750px){
	.products-cards .card {
	    width: 90%;
	}
	.products-cards .card.card-psoriaz {
	    width: 90%;
	}
	.section-image{
	    width: 90%;
	}
	.section-why-us .section-cards .card {
	    width: 100%;
	}
}
@media only screen and (max-width: 600px){
	*{
		font-size: 18px;
	}
	.logo{
		width: 40px;
	}
	.image-border {
	    width: calc((100% - 20px) / 2);
	}
	.header-content{
		flex-wrap: wrap;
	}
	.right-block,
	.left-block{
		width: 100%;
		justify-content: center;
		text-align: center;
	}
	.left-block{
		margin-top: 10px;
	}
	.right-block a,
	.left-block a{
		justify-content: center;
	}
	.main-meta{
		padding: 0 20px;
	}
	h1{
		font-size: 40px;
		line-height: 50px;
	}
	.main-meta p{
		font-size: 18px;
	}
	.section-about-us,
	.section-why-us,
	.section-result,
	.section-products{
		padding: 100px 0;
	}
}
@media only screen and (max-width: 400px){
	*{
		font-size: 16px;
	}
	.image-border {
	    width: calc((100% - 20px) / 2);
	}
	.main-meta{
		padding: 0 10px;
	}
	.main-meta p{
		font-size: 18px;
	}
	.section-title{
		font-size: 26px;
	}
	hr{
		width: 30%;
		height: 1px;
	}
}
/* Добавьте в css/style.css */
@media only screen and (max-width: 600px) {
    .modal-nav {
        display: none !important;
    }
    
    .modal-close {
        width: 40px !important;
        height: 40px !important;
        font-size: 24px !important;
        top: 10px !important;
        right: 10px !important;
    }
    
    .modal-content {
        max-width: 95vw !important;
        max-height: 95vh !important;
    }
    
    .modal-image {
        max-height: 85vh !important;
    }
}

/* Анимация появления */
.image-modal {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-modal[style*="display: flex"] {
    opacity: 1;
}

.modal-image {
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.image-modal[style*="display: flex"] .modal-image {
    transform: scale(1);
}