.director-letter {
  position: relative;
  width: 100%;
  min-width: 400px;
  height: 523px;
  overflow: hidden;
  background-color: #ebebeb;
  color: #000000;
}

.director-letter__inner {
  position: relative;
  width: 980px;
  height: 523px;
  margin: 0 auto;
}

.director-letter__title {
  position: absolute;
  top: 10px;
  left: 321.4px;
  width: 376px;
  margin: 0;
  color: #000000;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 35px;
  font-weight: 400;
  line-height: 1.3;
  transform-origin: 0 0;
}

.director-letter__portrait {
  position: absolute;
  top: 42px;
  left: 0;
  display: block;
  width: 542.793px;
  height: 480.996px;
  overflow: hidden;
}

.director-letter__portrait img {
  position: absolute;
  top: -68px;
  left: -97px;
  display: block;
  width: 394px;
  height: 691px;
}

.director-letter__copy {
  position: absolute;
  top: 56px;
  left: 248.4px;
  width: 728px;
  color: #000000;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 300;
  line-height: 16.9px;
  text-align: left;
  transform-origin: 0 0;
}

.director-letter__copy p {
  margin: 0;
}

.director-letter__spacer {
  height: 16.9px;
}

@media only screen and (max-width: 600px) {
  .director-letter {
    width: 400px;
    height: 789px;
  }

  .director-letter__inner {
    width: 400px;
    height: 789px;
    margin: 0;
  }

  .director-letter__title {
    top: 18px;
    left: 109px;
    width: 214px;
    font-size: 20px;
    transform: scale(1.052);
  }

  .director-letter__portrait {
    top: 9px;
    left: 0;
    width: 109px;
    height: 96.889px;
  }

  .director-letter__portrait img {
    top: -50px;
    left: -39px;
    width: 241px;
    height: 430px;
  }

  .director-letter__copy {
    top: 112px;
    left: 6px;
    width: 412px;
    transform: scale(0.956);
  }
}