index.css

#portada {
  text-align: center;
}
#portada h1 {
  padding: 0.5em;
  font-size: calc(0.8em + 1vw);
}
#portada-img {
  margin: 0 5em;
}
#portada-img img {

  max-width: 100%;
  width: 100%;

}
.bordes {
  border: 0.25em solid white;
  border-radius: 0.5em;

}
.texto {
  margin: 2em 5em;
  text-align: justify;
}
.texto h2 {
  font-size: calc(0.6em + 1vw);
  line-height: 2em;
}

.texto p{
  font-size: calc(0.1em + 1vw);
}
#fotos {
  position: relative;
  padding: 2em 5em;
}
#fotos img {

  max-width: 100%;
  width: 100%;
}
#fotos h2 {
  top: 2em;
  left: 50%;
  position: absolute;
  transform: translate(-50%, 10%);
}
#diagram {
  border: 15px solid white;
  border-top: 30px solid white;
  margin-bottom: 0.8em;
}
#fotos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 0.8em;
}



.routers-nombre{
  position: absolute;
  top: 1em;
  left: 50%;
  transform: translate(-50%, 10%);
}


@media (max-width: 1080px) {
  #fotos h2 {position: absolute;top: 2.5em;}
  #fotos-grid {
    display: grid;
    grid-template-columns: 1fr;
  }
}