.letters {
  position: relative;
  margin-inline: auto;
  padding: 20px 10px;
  width: 90%;
  max-width: 100%;
}

@media (max-width: 1024px) {
  .letters {
    width: 100%;
  }
}

.letter__container {
  display: grid;
  margin-inline: auto;
  position: relative;
  width: 90%;
  height: max-content;
}

@media (max-width: 768px) {
  .letter__container {
    width: 100%;
  }
}

/* .letter__container::before,
.letter__container::after {
  content: "";
  background: var(--color-white);
  border-radius: var(--border-radius);
  box-shadow: 0 4.5810809135px 22.9054050446px 0 #a4abb71f, 0 12.2162160873px 18.3243236542px 0 #6b738424, 0 6.1081080437px 7.6351351738px 0 #3e405433;
  border: var(--border-width) solid var(--border-color);
  inset: 0;
  pointer-events: none;
  position: absolute;
  height: 100%;
  width: 99%;
}

.letter__container::before {
  transform: rotate(-2.2deg) translate(0.4%, 0.1%);
}

.letter__container::after {
  height: 97.1%;
  transform: rotate(2.1deg) translate(0.2%, 1.5%)
} */

.letters__main {
  position: relative;
  display: grid;
  padding: 9.5% 7%;
  margin: 0px auto;
  background-color: var(--color-white);
  /* box-shadow: 0 4.5810809135px 22.9054050446px 0 #a4abb71f, 0 12.2162160873px 18.3243236542px 0 #6b738424, 0 6.1081080437px 7.6351351738px 0 #3e405433; */
  /* border-radius: var(--border-radius); */
  width: 100%;
  /* border: var(--border-width) solid var(--border-color); */
  z-index: 3;
}

.letters__paragraph {
  margin-bottom: var(--space-md);
}

/* Letter body copy is <p> for a correct document outline, but keeps the
   serif h3-style look it has always had (see typography.css :is(h3)). */
.letters__paragraph p {
  font-family: "PP-Eiko", ui-serif, serif;
  font-size: var(--font-h3);
  font-weight: 400;
  line-height: 1.4;
  margin-block: 0;
}

.letters__paragraph img {
  width: 15rem;
  margin-top: var(--space-md);
}