.box {
gap:10px;
background-color: #d3bee8;
box-shadow: 10px 10px 9px #cdecd0;
border-radius: 20px;
padding:20px;
text-align: center;
}

.title {
  width: 100%;
  padding-top: 20px;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;

  background-image:
    url('img/background.png') !important;
background-blend-mode: lighten!important;
  background-size: contain !important;
  background-repeat:repeat !important;
  background-position: center !important;

  z-index: -1 !important;
}


.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 30px;
  padding: 40px;
}

.card img {
  
 width: 100%;
  border-radius: 9px;
  cursor: pointer;

  box-shadow: 
    0 6px 12px rgba(0,0,0,0.25);

  transition: transform 0.2s ease,
              box-shadow 0.2s ease;
}

.card img:hover {
  transform: translateY(-6px) scale(1.03);

  box-shadow:
    0 14px 24px rgba(0,0,0,0.35);
}

@media (max-width: 600px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}