body {
    font-size: 15pt;
    text-align: center;
}

#copertina {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  }

h1 {
  color: whitesmoke;
  position: relative;
  bottom: 100px;
   }

div {
  width: 100%;
  display: flex;
  flex-direction: raw;
  flex-wrap: wrap;
  justify-content: center;
  align-content: space-between;
}

img {
  margin: 10px;
  width: 40%;
}

img {
  width: 100%;
  border-radius: 20px;
  filter: drop-shadow(5px 5px 5px gray);
}

figcaption {
  display: block;
}

.icones {
  width: 40%;
  transition: transform 1s;
}

.iconed {
  width: 40%;
  transition: transform 1s ease-in;
}
  
.icones:hover {
  transform: scale(2.1) translateX(25%);
  z-index: 3;
}
  
.iconed:hover {
    transform: scale(2.1) translateX(-25%);
    z-index: 3;
}

@media screen and (orientation: portrait) and (max-width: 600px) {
  h1 {
    font-size: 70%;
    bottom: 50px;
  }  
  
  .icones:hover {
    transform: scale(2.5) translateX(22%);
    z-index: 2;
  }
  
  .iconed:hover {
    transform: scale(2.5) translateX(-22%);
    z-index: 2;
  }

}