@keyframes slideInRight{
to{
transform:translateX(0);
opacity:1}
}
@keyframes slideInLeft{
to{
transform:translateX(0);
opacity:1}
}
.news{
padding:var(--s-md)var(--s-sm);
background:repeating-linear-gradient(to bottom,rgba(255, 255, 255, 0.03),rgba(255, 255, 255, 0.03)1px,transparent 2px,transparent 4px);
text-align:center;
min-height:100vh}
.news h1{
max-width: 1000px;
margin-left:auto;
margin-right:auto;
text-align:left;
font-size:var(--s-3);
margin-top:var(--s-sm);
margin-bottom:var(--s-md);
color:var(--g)}
.description{
max-width: 1000px;
margin-bottom:var(--s-xl);
padding-bottom:var(--s-lg);
font-size:var(--s-1);
margin-left:auto;
margin-right:auto;
text-align:left;
border-bottom:2px dashed #555}
#news-container{
display:flex;
flex-wrap:wrap;
max-width:1000px;
margin:0 auto;
justify-content:center;
align-items:stretch;
text-align:left}
.news-item{
position:relative;
width:100%;
max-width:1000px;
height:auto;
margin:0 auto var(--s-xl);
background-color:rgba(0, 0, 0, 0.3);
padding:var(--s-lg);
border-radius:var(--s-sm);
overflow:hidden;
box-shadow:0 0 15px rgba(0, 0, 0, 0.2);
text-align:left}
.news-item h3{
color:var(--g);
font-size:var(--s-2);
margin-bottom:var(--s-md)}
.news-item>p{
flex-grow:1;
font-size:var(--s-1);
margin-bottom:var(--s-sm);
white-space:pre-line;
opacity:0.9}
.news-item a{
color:var(--g);
text-decoration:none}
.images-item{
position:relative;
width:100%;
max-width:1000px;
max-height:450px;
margin:0 auto var(--s-lg);
background-color:rgba(0, 0, 0, 0.3);
padding:var(--s-lg);
border-radius:var(--s-sm);
overflow:hidden;
box-shadow:0 -5 15px rgba(0, 0, 0, 0.2);
text-align:left;
display:flex;
gap:16px;
align-items:flex-start;
flex-direction:row}
.image-wrapper{
position:relative;
height:100%;
width:auto;
aspect-ratio:1/1;
flex-shrink:0;
overflow:hidden}
.info-container{
position:relative;
margin-left:var(--s-xs);
flex-grow:1;
min-width:200px;
height:100%}
.image-info{
margin-left:var(--s-xs);
padding-right:var(--s-md);
flex-grow:1;
min-width:200px;
overflow-y:auto;
scrollbar-gutter:stable}
.image-info h3{
color:var(--g);
font-size:var(--s-2);
margin-bottom:var(--s-md);
flex-shrink:0}
.image-info p{
flex-grow:1;
font-size:var(--s-1);
margin-bottom:var(--s-sm);
white-space:pre-line;
opacity:0.9}
.image-info a{
color:var(--g);
text-decoration:none}
.image-info>p,
.image-info>a {
overflow-y:auto;
max-height:100%}
.image-wrapper img{
height:100%;
width:auto;
aspect-ratio:1/1;
object-fit:cover;
display:block;
border-radius:var(--s-xs)}
.slide-img{
position:relative;
transition:transform 0.25s ease,opacity 0.25s ease;
will-change:transform,opacity}
.slide-out-left{
transform:translateX(-100%);
opacity:0.7;
transition-timing-function:ease-in}
.slide-out-right{
transform:translateX(100%);
opacity:0.7;
transition-timing-function:ease-in}
.slide-in-right{
transform:translateX(100%);
opacity:0;
animation:slideInRight 0.25s forwards ease-out}
.slide-in-left{
transform:translateX(-100%);
opacity:0;
animation:slideInLeft 0.25s forwards ease-out}
.prev,
.next{
position:absolute;
top:50%;
transform:translateY(-50%);
z-index:10;
background:rgba(0, 0, 0, 0.6);
color:white;
font-size:var(--s-2);
border:none;
width:var(--s-3);
height:var(--s-3);
cursor:pointer;
border-radius:var(--s-0);
display:flex;
align-items:center;
justify-content:center}
.prev{
left:10px}
.next{
right:10px}
.slide-counter{
position:absolute;
bottom:10px;
right:50%;
transform:translateX(50%);
z-index:10;
background:rgba(0, 0, 0, 0.6);
color:#fff;
padding:4px 10px;
border-radius:6px;
font-size:1rem;
font-weight:bold}
.prev:hover,
.next:hover{
color:var(--g)}
.news-date{
position:relative!important;
margin-top:var(--s-lg);
padding-top:var(--s-sm);
border-top:1px solid #555;
color:#8A8A8A;
text-align:right;
pointer-events:none}
.news-date p,
.news-date-image p{
margin:0;
margin-bottom:0;
font-size:var(--s-0);
color:#8a8a8a;
white-space:pre-line;
opacity:0.9}
.news-date-image{
position:absolute;
bottom:0;
width:100%;
padding-top:var(--s-sm);
border-top:1px solid #555;
color:#8A8A8A;
text-align:right;
pointer-events:none}
.input-wrapper{
position:relative;
width:80%;
max-width:800px;
margin:0 auto var(--s-lg)}
.search-icon{
position:absolute;
top:50%;
left:var(--s-sm);
transform:translateY(-50%);
height:var(--s-1);
width:var(--s-1);
pointer-events:none;
opacity:0.7}
#search{
color:var(--l);
background-color:rgba(0, 0, 0, 0.3);
padding:var(--s-sm)var(--s-sm)var(--s-sm)calc(var(--s-sm) * 3);
border-radius:var(--s-sm);
border:2px solid var(--g);
font-size:var(--s-0);
width:100%;
box-sizing:border-box}
#search:focus{
outline:none;
border-color:var(--g);
box-shadow:0 0 10px var(--g)}
@media(max-width:800px){
.images-item{
flex-direction:column;
max-height:none}
.image-wrapper{
width:100%;
height:auto}
.image-wrapper img{
width:100%;
height:auto}
.image-info{
margin-left:0;
width:100%;
margin-bottom:80px}
#search{
padding:var(--s-xs)var(--s-xs)var(--s-xs)calc(var(--s-xs) * 4);
border-radius:var(--s-xs);
font-size:var(--s--1)}
.search-icon{
left:var(--s-xs);
height:var(--s-0);
width:var(--s-0)}
}
@media(min-width:800px){
.image-info{
max-height:280px}
.image-info::-webkit-scrollbar{
width:10px;
position:absolute}
.image-info::-webkit-scrollbar-thumb{
background-color:#00cc6e;
border-radius:8px;
margin-right:-10px;
border:3px solid transparent;
background-clip:padding-box}
.image-info::-webkit-scrollbar-track {
background:transparent;
margin-top:8px;
margin-bottom:16px}
.image-info{
scrollbar-width:thin;
scrollbar-color:#00cc6e transparent}}