.cope-letter {
  display: flex;
  align-items: center;
}

.cope-letter .cope {
  flex: 0 1 auto;
  max-width: min(535px, 50%);
}

.cope-letter .letter-box{
  flex: 1;
  padding: 0 60px 0 28px;
  max-width: 880px;
}

.cope-letter p {
  line-height: 1.4;
  font-family: "Courgette", cursive;
}

.cope-letter .sign {
  max-width: 100px;
  opacity: 0.9;
}

@media(max-width: 1199px) {
  .cope-letter .letter-box {
    padding: 0 42px 0 22px;
  }
}

@media(max-width: 991px) {
  .cope-letter .letter-box {
    padding: 0 24px 0 16px;
  }

  .cope-letter .cope {
    max-width: 40%;
  }
}

@media(max-width: 767px) {
  .cope-letter {
    display: block;
    position: relative;
    padding: 24px 0;
    margin-bottom: 24px;
  }

    .cope-letter .cope {
    width: 100%;
    max-width: none;
    filter: grayscale(1);
    opacity: 0.35;
    position: absolute;
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }

  .cope-letter .letter-box {
    width: 100%;
    padding: 0 16px;
    max-width: 380px;
    margin: 48px auto 24px;
    position: relative;
    z-index: 1;
  }
}