#news{
width:100%;
display:flex;
 
justify-content: space-between;
gap:20px;
flex-wrap:wrap;
}

h1{
padding:  20px 0 30px 0
}
#news section{
width : 380px;
height : 420px;
border:1px solid #A8A8A8;
border-radius:20px;
	
}


#news section figure{
 	width : 100%;
	height : 256px;
}

#news section img{
	 border-radius: 20px 20px 0 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


#news section>div{
	height:164px;
	padding:15px;
	display:flex;
	flex-direction:column;
	justify-content: space-between;
 
}

#news section>div h2{
	font-weight:600;
	font-size:18px;
 line-height: 24px;
}
 


 
.date{
	 color:#A8A8A8;
	 font-size:15px;
	 font-weight:400;
 
 }
 
#one > p:first-of-type {
    padding-top: 30px;
}

@media (max-width: 1181px) {
	
	#content{
	padding:  20px;
	}
    #news section {
        width: calc(33.333% - 14px);   
        height: 360px;  
    }
    
    #news section figure {
        height: 220px;  
    }
    
    #news section > div {
        height: 140px;
        padding: 12px;
    }
    
    #news section > div h2 {
        font-size: 16px;
        line-height: 20px;
    }
	
} 

@media (max-width: 900px) {
    #news section {
        width: calc(50% - 10px);
        height: 320px;
    }
    
    #news section figure {
        height: 190px;
    }
}

@media (max-width: 600px) {
    #news {
        gap: 15px;
    }
    
    #news section {
        width: 100%; 
       height : 420px;
    }
    
    #news section figure {
       	height : 256px;
    }
}


#paginator {
    display: flex;
    justify-content: center;  
    align-items: center; 
    gap: 10px;
    padding: 40px 0 20px 0;
}

#paginator div {
    border: 1px solid #D9D9D9;
    border-radius: 8px;
    background: white;
    font-weight: 400;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
    width: 38px;
    height: 38px;
    text-align: center;
    
    /* ← Центрирование текста внутри */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1; /* Убрать лишние отступы */
}

#paginator div:hover {

    background: #f0f8ff;
 
}

#paginator div.active {
  cursor:auto;
  border: 2px solid   #2B2B2B;
 
}

#paginator div.active:hover {
 
    background: white;

}


@media (max-width: 600px) {
    #paginator {
        gap: 6px;
        padding: 15px 0;
    }
    
    #paginator div {
        padding: 8px 12px;
        font-size: 13px;
        min-width: 40px;
    }
}


#paginator div {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
 

 
 /* One */
 
 
#one ul, #one ol {
	padding:10px 10px 10px 20px;
	font-size:18px;
}
 
#title {
    float: right;
	 max-width:680px;
    object-fit: cover;
    margin: 0 0 1.5rem 1.5rem;  
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}


p{
	font-size:18px;
	
	
	 
}

#content::after {
    content: "";
    display: table;
    clear: both; 
}

 
@media (max-width: 768px) {
    #title {
        float: none !important;
        width: 100%;
        height: 220px;
        margin: 0 0 1rem 0;
    }
}




.video-container {
    width: 380px;  
    height: 335px;  
    position: relative;
}

.video-container iframe {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    border: 1px solid #A8A8A8;
}



#photoNews {
    width: 100%;
    margin: 40px auto;
}

 
.swiper-slide img {
    width: 380px;  
    height: 335px;  
    object-fit: cover;  
    border-radius: 16px; 
    border:1px solid #A8A8A8;
	cursor:pointer;
}

.swiper-slide{
	text-align:center;
}


@media (max-width: 1200px) {
.swiper-slide img {

    width: clamp(200px, 28vw, 380px); 
    height: clamp(200px, 25vw, 335px); 
    max-width: 100%;
    

}
.video-container {
    width: clamp(200px, 28vw, 380px); 
    height: clamp(200px, 25vw, 335px); 
    max-width: 100%;
}

}


@media (max-width: 1000px) {
.swiper-slide img {

    width: 380px;  
    height: 335px;  

}
.video-container {
    width: 380px;  
    height: 335px;  
    position: relative;
}

}