/* ARTICLE SLIDER */

#gallery{
margin-bottom:8rem;
}

#gallery-header{
display:flex;
flex-direction:row;
text-transform:uppercase; 
font-size: 0.8em; 
margin: 1.2em 0; 
padding: 1.2em 0; 
border-bottom:1px solid black;  
justify-content:space-between;
}

.gallery-title{
	font-size:0.75rem;
	font-family: 'Sora';
	font-weight:600;
}

.gallery-label{
font-family:"Sora";
font-size:0.8rem;
line-height:1rem;
font-weight:600;
text-transform:uppercase;
}


.gallery-item{
width:320px; 
flex-shrink:0;
}

.gallery-item img{
border-radius:0px;
}


/* The animation code */
@keyframes example {
  from {opacity: 1;} 
    to{opacity:0.5;}
}

/* The element to apply the animation to */

#articles a {
	position:relative;
	text-decoration:none;
}

#articles a:hover {
  animation-name: example;
  animation-duration: 0.2s;
  animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
}

.controls{
display:flex;
flex-direction:row;
}

#slideLeft, #slideRight{
cursor:pointer;
padding:0 8px 0 8px;
font-size:0.75rem;
font-family: 'Sora';
font-weight:600;
}

#slideLeft:hover, #slideRight:hover{
background:var(--light-gray);
}

#articles {
background:var(--warm);
-webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
}

#articles::-webkit-scrollbar {
  width: 1px;
  height: 5px;
  background: #F5F5F5;
}

/* Track */
#articles::-webkit-scrollbar-track {
  background: var(--light-gray);
  
}

/* Handle */
#articles::-webkit-scrollbar-thumb {
  background: #EBACFF;
}

/* Handle on hover */
#articles::-webkit-scrollbar-thumb:hover {
  background: #555;
}