In Cold Blood book cover

<div class="cover">
  <span>IN</span>
  <span>COLD</span>
  <span>BLOOD</span>
  <span>CAPOTE</span>
</div>

@font-face {
  font-family: "Syncopate";
  font-weight: 700;
  src: url("Syncopate-Bold.ttf");
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --text-color: rgb(91, 91, 91);
}

body {
  height: 100dvh;

  display: grid;
  place-items: center;
}

.cover {
  width: 300px;

  aspect-ratio: 1 / 1.5;

  display: grid;
  gap: 10px;
  grid-template-rows: 1.75fr 4fr 2fr 1fr;

  font-family: Syncopate, sans-serif;
  font-weight: 700;

  background-color: white;
  background-image: url("img/bg.webp");
  background-position: 30.7% 50%;
  background-size: cover;

  color: var(--text-color);

  overflow: hidden;

  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.25);
}

.cover span:nth-child(1) {
  padding-inline-start: 0.4em;
  padding-block-start: 0.2rem;

  align-self: end;

  writing-mode: vertical-lr;
  font-size: 2rem;
  letter-spacing: 1rem;
}

.cover span:nth-child(2) {
  justify-self: center;
  align-self: center;

  padding-inline-start: 0.25rem;

  font-size: 3rem;
  letter-spacing: 1.3rem;

  transform: rotate(20deg);
}

.cover span:nth-child(3) {
  justify-self: center;
  padding-inline-start: 0.4rem;
  align-self: flex-start;

  font-size: 3rem;
  letter-spacing: 0.2rem;

  color: transparent;
  -webkit-background-clip: text;
  background-color: text;

  --blood-color: rgba(153, 0, 0, 0.25);
  --amount: 29%;

  background-image: linear-gradient(
      to bottom,
      var(--text-color) 0 calc(100% - var(--amount)),
      var(--blood-color) calc(100% - var(--amount)) 100%
    ),
    linear-gradient(var(--text-color), var(--text-color));
}

.cover span:nth-child(4) {
  font-size: 2rem;
  justify-self: center;
  color: white;
}

@media screen and (min-width: 768px) {
  .cover {
    width: 500px;
    grid-template-rows: 1.75fr 4fr 2.2fr 1fr;
  }

  .cover span:nth-child(1) {
    font-size: 4rem;
    letter-spacing: 1.75rem;
  }

  .cover span:nth-child(2) {
    font-size: 5.1rem;
    letter-spacing: 2rem;
  }

  .cover span:nth-child(3) {
    font-size: 5.1rem;
  }

  .cover span:nth-child(4) {
    font-size: 3.5rem;
  }
}