.gallery{
    display:flex;
    flex-direction:row;
    align-items:self-start;
    justify-content: center;
    flex-wrap:wrap;
    gap:20px;
}
.container{
    margin-top:calc(3.5rem + 20px);
}
.gallery img{
    flex:1;
    max-height:400px;
    object-fit:cover;
    transform:all 500ms linear;
    cursor:zoom-in;
}
.gallery img:hover{
    border-radius:1rem;
}
.navbar{
    display:flex !important;
}
*{
    --loading-grey:#00576f;
}

.pagination{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    gap:5px;
    margin-top:3%;
    margin-bottom:3%;
}
.pagination button{
    background:#313131;
    transition:all 300ms ease-in-out;
    cursor:pointer;
}
.pagination .selected{
    background:#537992;
}
.loading{
  background-color: var(--loading-grey);
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, .5) 50%,
    rgba(255, 255, 255, 0) 60%
  ) var(--loading-grey);
  background-size: 200% 100%;
  background-position-x: 180%;
  animation: 1s loading ease-in-out infinite;
  height:300px;
}
.hidden{
    display:none;
}
@keyframes loading {
  to {
    background-position-x: -20%;
  }
}


@media(max-width:768px){
    .gallery img, .loading{
        flex-basis:100%;
        max-width:100%;
    }
}
@media(min-width:768px){
    .gallery img, .loading{
        flex-basis:300px;
    }
}