* {
    margin: 0;
}
h1{
  margin-bottom:5px;
  background:#169825;
  font-size:16px;
  font-weight:bold;
  padding:4px 0;
  color:#fff;
  text-align: center;
}
.wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}
.wrapper a {
    /* width: calc(100% / 3.5); */
    max-width: 700px;
    height: auto;
    /* margin: 10px; */
    width: 25%;
    padding: 2px;
    box-sizing: border-box;
}
.wrapper a img {
    display: block;
    width: 100%;
}
.opacity:hover img{
    opacity:0.7;
}

@media screen and (max-width: 600px) {
.wrapper{
  /* padding:0 10px; */
  box-sizing: border-box;
}
.wrapper a {
    /* width: calc(100% / 2.5); */
    width: 50%;
}
h1{
  font-size: 11px!important;
  font-weight: normal!important;
}
}