

    h2 {
      text-align: center;
      color: #053b6e;
      margin-bottom: 30px;
    }

    .grid-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 15px;
      padding: 10px;
    }

    .grid-item {
      position: relative;
      overflow: hidden;
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;
    }

    .grid-item img {
      width: 120%;
      height: 100%;
      object-fit: fill;
      display: block;
      transition: transform 0.4s ease-in-out;
    }

    .grid-item:hover {
      z-index: 10;
      transform: scale(1.5);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    }

    .grid-item:hover img {
      transform: scale(1.2);
    }
    .grid-item {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.grid-item:hover {
  z-index: 10;
  transform: scale(1.15) rotate(2deg);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.35);
}

.grid-item:hover img {
  transform: scale(1.2) rotate(-1deg);
}
