body {

  margin: 0;

  font-family: Arial, sans-serif;

}



.photo-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  gap: 10px;

  padding: 20px;

}



.photo {

  position: relative;

  width: 200px;

  height:300px;

  overflow: hidden;

}



.photo img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.3s ease;

}



.photo:hover img {

  transform: scale(1.1); 



}



.overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  text-align: center;

  pointer-events: none;

  opacity: 0;

  transition: opacity 0.3s ease;

  background-color: rgba(0, 0, 0, 0.3);

}



.photo:hover .overlay {

  opacity: 1;

}

div.fixed {

  position: relative;

  /* top: 300;

  left: 800;

  width: 900px;*/

    width: 100%;

  height:60%;

  border: 3px solid white;

}



a{



text-decoration:none;

}

a:hover {

color:grey;



}