body{
  margin: 0;
  font-family: "Jura", sans-serif;
}
.gallery{
  padding 2em;
  min-height: 120vh;
}
.buttons{
  padding: 2em 0 6em 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
font-family: "Jura", sans-serif;
}
.buttons button{
  margin: 1em;
  padding: 0.7em 1.5em;
  font-size: 1.1em;
  border: none;
  background: #4B2387;
  color: #fff;
  border: 2px solid #BE96FF;
  border-radius: 0.2em;
  cursor: pointer;
  transition: .3s;
}
.buttons button:hover,
.buttons .btn-clicked{
  background: #fff;
  color: #4B2387;
}
.images{
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: .2em;
}
.images img{
  width: 12em;
  margin: 1em;
  border-radius: 1em;
  transition: 0.6s;
}
.images .img-expanded{
  width: 12em;
  margin: 1em;
}
.images .img-shrink{
  width: 0em;
  margin: -1em;
 }
@media screen and (max-width: 1439px){
  .images{
    max-width: 896px;
  }
}
@media screen and (max-width: 986px){
  .images{
    align-items: center;
    flex-direction: column;
  }
  .images img{
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}
@media screen and (max-width: 600px){
  .buttons button{
    width: 100%;
    display: block;
  }
  .images .img-expanded,
  .images img{
    width: 100%;
  }
}