<div class="season one">
  <p class="text__one"> WINTER </p>
</div>
<div class="season two">
  <p class="text__two">SPRING </p>
</div>
<div class="season three">
  <p class="text__three"> SUMMER </p>
</div>
<div class="season four">
  <p class="text__four"> AUTUMN </p>
</div>

body,
html {
  height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
}

.season {
  height: 25vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

p {
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Luckiest Guy", cursive;
  font-size: 8rem;
  letter-spacing: 0.7rem;
  width: 100%;
  height: 100%;
  color: white;
  background: black;
  text-align: center;
  mix-blend-mode: multiply;
  text-shadow: -5px 5px 0px black, -10px 10px 0px white, -20px 20px 0px purple;
}

.one {
  background: url("https://images.unsplash.com/photo-1634474559500-c934afa9f01f?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzNzA4OTcyNg&ixlib=rb-1.2.1&q=85");
  background-position: bottom right;
  background-size: cover;
}

.two {
  background: url("https://images.unsplash.com/photo-1634151527394-02a59150c521?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzNzA4OTMwNA&ixlib=rb-1.2.1&q=85");
  background-position: top;
  background-size: cover;
}

.three {
  background: url("https://images.unsplash.com/photo-1490750967868-88aa4486c946?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzNzA5MDU2NQ&ixlib=rb-1.2.1&q=85");
  background-position: bottom left;
  background-size: cover;
}

.four {
  background: url("https://images.unsplash.com/photo-1453959022778-cfda85dbe0f9?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzNzA4NjY0NQ&ixlib=rb-1.2.1&q=85");
  background-position: center;
  background-size: cover;
}