.wrapper{
  margin-top: 2em;
  max-width: 1100px;
}
.wrapper nav{
  display: flex;
  justify-content: center;
  width: 100%;
  margin: auto;
}
.wrapper .items{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.items span{
  margin: 4px;
  padding: 6px 16px;
  font-size: 1em;
  font-weight: 400;
  cursor: pointer;
  color: var(--fa-p);
  border-radius: 50px;
  border: 2px solid var(--fa-p);
  transition: all 0.3s ease;
}
.items span.active,
.items span:hover{
  color: #fff;
  background: var(--fa-p);
}

.gallery{
  margin-top: 2em;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 8px;
  gap: 8px;
}
.gallery .image{
  position: relative;
  cursor: pointer;
  padding-bottom: 8px;
}

.gallery .image img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.gallery .image.active {
  grid-column: span 3;
  z-index: 10;
}

.gallery .image.active img {
  transform: scale(1);
  border-radius: 16px;
}

.gallery .image:hover img{
   transform: scale(1.02);
}
.gallery .image.active:hover img{
   transform: scale(1);
}

.gallery .image.hide{
  display: none;
}
.gallery .image.show{
  animation: animate 0.4s ease;
}
@keyframes animate {
  0%{
    transform: scale(0.5);
  }
  100%{
    transform: scale(1);
  }
}



@media (max-width: 1000px) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
  }
  .gallery .image.active {
    grid-column: span 2;
  }
}
@media (max-width: 800px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 700px) {
  .wrapper nav .items{
    max-width: 600px;
  }
  nav .items span{
    padding: 7px 15px;
  }
}
@media (max-width: 600px) {
  .wrapper{
    margin: 30px auto;
  }
  .wrapper nav .items{
    flex-wrap: wrap;
    justify-content: center;
  }
  nav .items span{
    margin: 5px;
  }
}
@media (max-width: 480px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}