body{
  margin:0;
  background:#000;
  color:#fff;
  font-family:serif;
  text-align:center;
}

/* header */
header{
  padding:15px;
  font-size:12px;
  letter-spacing:2px;
}

/* hero */
.hero{
  position:relative;
  height:60vh;
}

.hero img{
  width:100%;
  height:100%;
  object-fit:cover;
  max-height:600px;
}

.overlay{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

.overlay h1{
  font-size:22px;
}

/* sections */
.section{
  padding:30px 10px;
}

.section img{
  width:100%;
  max-width:900px;
  height:auto;
  max-height:350px;
  object-fit:cover;
  border-radius:4px;
}

.section p{
  font-size:13px;
  margin-top:10px;
  opacity:0.8;
}

/* mobile */
@media(max-width:768px){
  .hero{
    height:50vh;
  }

  .section img{
    max-height:220px;
  }
}