.contents {
  width: 90%;
  height: 60%;
  padding: 1% 0% 0% 4%;
  font-family: "saira";
}

.contents h2{
  margin-bottom: 1%;
}

.contents hr{
  margin-bottom: 2%;
  margin-left: 0%;
  width: 90%;
}


.gallery {
  width: 100%;
  height: 60%;
  padding: 1% 0% 03% 5%;
  font-family : "saira";
  overflow-x: hidden;
  line-height:1.0;
  }

.gallery p {
  font-size: 15px;
  margin-top: 1%;
  
}
.gallery h3{
  font-size : 18px;
  margin-bottom: 1%;
  margin-top: 1%;
}
.gallery__group{
  position:flex;
  margin-top : 10px;
  width: 100%;
  overflow: hidden;
  display:grid;
  grid-template-columns: repeat(auto-fill,minmax(300px,300px));
  grid-gap : 0.7rem;
  }

img{
    width: 300px;
    height:180px;
    object-fit:cover;    
    object-position: bottom;
    filter:grayscale(70%)brightness(110%);
  }

img:hover{
    filter:grayscale(0%);
    transition: all .3s ease-in-out;
  }