*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
margin: 0;
overflow-x: hidden ;
overflow-y: auto;
}

h1{

text-align: center;
font-size: 50px;
color: #233E83;
line-height: 5.5rem;
text-transform: uppercase;
}

.container {
position: relative;
padding: 14px;
max-width: 1400px;
margin: 0 auto;
overflow: hidden;
}


.galeria-wrapper{
overflow-x: auto;
overflow-y: hidden;
border-radius: 10px;

}

.galeria-wrapper::-webkit-scrollbar {
display: none;
}

.galeria{
display: flex;
flex-flow: row nowrap;
gap: 15px;
width: max-content;

}

.arrow-left,
.arrow-right {
position: absolute;
top: 0;
left: 0;
right: auto;
bottom: 0;
font-size: 20px;
display: flex;
align-items: center;
width: 40px;
color: #fff;
transition: all 600ms ease-in-out;
background: linear-gradient(to left, transparent 0%, black 200%);
opacity: 0.1;
cursor: pointer;
border: none;


}

.arrow-left:hover,
.arrow-right:hover {
opacity: 1;
}

.arrow-right{
left: auto;
right: 0;
background: linear-gradient(to right, transparent 0%, black 200%);
}

.item{
width: 250px;
height: 300px;
flex-shrink: 0;
overflow: hidden;
transition: all 600ms ease-in-out;

}

.current-item {
opacity: 100%;
}