* {
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100vh;
  color: #ffffff;
  background-color: #161616;
  overflow: hidden;
}
.block {
  position: relative;
  width: 580px;
  height: 460px;
  margin: 10px 300px 20px 80px;
}
h1 {
  position: absolute;
  font-family: "Monument Extended";
  font-weight: lighter;
  font-size: 64px;
}
.block-1 {
  background: url(./assets/img-01.jpg) no-repeat 50% 50%;
  background-size: cover;
}
.block-2 {
  background: url(./assets/img-02.jpg) no-repeat 50% 50%;
  background-size: cover;
}
.block-3 {
  background: url(./assets/img-03.jpg) no-repeat 50% 50%;
  background-size: cover;
}
.block-4 {
  background: url(./assets/img-04.jpg) no-repeat 50% 50%;
  background-size: cover;
}
.block-5 {
  background: url(./assets/img-05.jpg) no-repeat 50% 50%;
  background-size: cover;
}
.container {
  margin-top: 25vh;
  margin-left: 10vw;
}
.block-1 h1,
.block-3 h1,
.block-5 h1 {
  bottom: 0;
  right: -60px;
}
.block-2 h1,
.block-4 h1 {
  right: -60px;
}