.grid-gallery {
  padding: 50px 30px;
}
.grid-gallery-content {
  max-width: 1200px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
}
.grid-gallery-content .grid {
  gap: 15px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  display: grid;
  justify-content: center;
}
.grid-gallery-content .grid .item {
  cursor: pointer;
  border-radius: 15px;
  background-color: antiquewhite;
  padding: 4px;
  transition: 0.5s;
  position: relative;
}
.grid-gallery-content .grid .item .cartoon {
  position: absolute;
  top: 0;
  left: -20px;
  width: 50px;
  animation-name: scaledown;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  rotate: -15deg;
  scale: 1;
  
}
.grid-gallery-content .grid .item .cartoon img {
  width: 100%;
  filter: drop-shadow(5px 5px 5px #777777);
}
.grid-gallery-content .grid .item .image {
  height: 100%;
}
.grid-gallery-content .grid .item .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.3s;
  border-radius: 12px;
}

.grid-gallery-content .button {
  /* background-color: var(--bg-gold); */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
}

.grid-gallery-content .button a {
  background-color: var(--bg-color);
  color: white;
  border: none;
  cursor: pointer;
  padding-inline: 30px;
  padding-block: 15px;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: 0.3s;
}
.grid-gallery-content .button a:hover {
  background-color: var(--bg-gold);
  color: black;
}

@media screen and (max-width: 992px) {
  .grid-gallery-content .grid {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    display: grid;
  }
}

@media screen and (max-width: 768px) {
  .grid-gallery-content .grid {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    display: grid;
  }
}

@media screen and (max-width: 576px) {
  .grid-gallery-content .grid {
    grid-template-columns: 1fr 1fr 1fr;
    display: grid;
  }
  
  .grid-gallery-content .grid .item .cartoon {
    
    width: 60px;
    
  }
}

@keyframes scaledown {
  0% {
    
  }
  100% {
    rotate: 15deg;
    scale: 1.1;
  }
}