/* Add these styles to your css/style.css file */
.gallery {
  padding: 50px 0;
  background-color: #f8f9fa;
}

.gallery_grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.gallery_item {
  flex: 1 1 calc(33.333% - 20px);
  max-width: calc(33.333% - 20px);
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 5px;
  border: 2px solid #ddd;
  transition: transform 0.3s;
}

.gallery_item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 5px;
}

.gallery_item:hover {
  transform: scale(1.05);
}

@media (max-width: 768px) {
  .gallery_item {
    flex: 1 1 calc(50% - 20px);
    max-width: calc(50% - 20px);
  }
}

@media (max-width: 480px) {
  .gallery_item {
    flex: 1 1 calc(50% - 10px);
    max-width: calc(50% - 10px);
  }
}

.gallery-background {
  background: linear-gradient(
    135deg,
    var(--indian-yellow),
    var(--eerie-black-1)
  );
  color: var(--white); /* White text for readability */
}