/* ABOUT CROP shares the site's 1520px content guide. */
.home-page .about-crop {
  padding: 56px 24px 48px;
  background: #fff;
}

.home-page .about-crop .about-crop-inner {
  width: min(1520px, 100%);
  max-width: 1520px;
  margin-inline: auto;
}

.home-page .about-crop .about-crop-intro {
  position: relative;
  display: block;
  min-height: 424px;
  overflow: hidden;
  background: #f8f7f7;
}

.home-page .about-crop .about-crop-hero {
  position: absolute;
  inset: 0 0 0 auto;
  width: 55%;
  height: calc(100% + 26px);
  aspect-ratio: auto;
  object-fit: contain;
  object-position: right top;
  mix-blend-mode: multiply;
  mask-image: linear-gradient(to right, transparent, #000 22%);
}

.home-page .about-crop .about-crop-copy {
  position: relative;
  z-index: 1;
  width: 50%;
  padding: 56px 0 56px 50px;
}

.home-page .about-crop .about-crop-eyebrow {
  margin: 0;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: .1em;
  font-weight: 400;
  color: #969696;
}

.home-page .about-crop .about-crop-copy h2 {
  margin: 52px 0 44px;
  font-size: 26px;
  line-height: 36px;
  font-weight: 600;
  letter-spacing: -.035em;
  white-space: nowrap;
}

.home-page .about-crop .about-crop-lead {
  margin: 0 0 34px;
  font-size: 18px;
  line-height: 25px;
  font-weight: 400;
  color: #6e8bbd;
  word-break: keep-all;
}

.home-page .about-crop .about-crop-description {
  margin: 0;
  font-size: 16px;
  line-height: 23px;
  color: #666;
  word-break: keep-all;
}

.home-page .about-crop .about-crop-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 18px;
  background: #edf0f2;
}

.home-page .about-crop .about-crop-pillar {
  display: block;
  min-width: 0;
  padding: 44px 34px 48px 86px;
}

.home-page .about-crop .about-crop-pillar + .about-crop-pillar::before {
  display: block;
  left: 0;
  top: 46px;
  bottom: 44px;
  background: #b7b7b7;
}

.home-page .about-crop .about-pillar-copy {
  display: block;
}

.home-page .about-crop .about-pillar-number {
  font-size: 36px;
  line-height: 44px;
  font-weight: 400;
  color: #888;
}

.home-page .about-crop .about-pillar-copy h3 {
  margin: 10px 0 0;
  font-size: 22px;
  line-height: 30px;
  font-weight: 400;
  letter-spacing: -.025em;
  white-space: nowrap;
}

.home-page .about-crop .about-pillar-copy p {
  margin: 34px 0 0;
  font-size: 16px;
  line-height: 24px;
  color: #7c7c7c;
  word-break: keep-all;
}

.home-page .about-crop .about-pillar-copy p::before {
  content: '';
  display: block;
  width: 26px;
  height: 2px;
  margin-bottom: 16px;
  background: #a3c5ef;
}

@media (min-width: 701px) and (max-width: 1500px) {
  .home-page .about-crop .about-crop-copy { padding-left: 38px; width: 53%; }
  .home-page .about-crop .about-crop-copy h2 { font-size: 23px; }
  .home-page .about-crop .about-crop-lead { font-size: 16px; }
  .home-page .about-crop .about-crop-description { font-size: 14px; }
  .home-page .about-crop .about-crop-pillar { padding-inline: 48px 24px; }
  .home-page .about-crop .about-pillar-copy h3 { font-size: 19px; }
  .home-page .about-crop .about-pillar-copy p { font-size: 14px; }
}

@media (min-width: 701px) and (max-width: 1100px) {
  .home-page .about-crop .about-crop-copy { width: 60%; padding: 36px 24px; }
  .home-page .about-crop .about-crop-copy h2 { white-space: normal; margin: 28px 0; }
  .home-page .about-crop .about-crop-hero { width: 55%; opacity: .6; }
  .home-page .about-crop .about-crop-pillar { padding-inline: 24px; }
  .home-page .about-crop .about-pillar-copy h3 { font-size: 16px; white-space: normal; }
  .home-page .about-crop .about-pillar-copy p br { display: none; }
}

@media (max-width: 700px) {
  .home-page .about-crop { padding: 32px 24px; }
  .home-page .about-crop .about-crop-copy { width: 100%; padding: 32px 24px; }
  .home-page .about-crop .about-crop-copy h2 { margin: 26px 0; font-size: 24px; line-height: 34px; white-space: normal; }
  .home-page .about-crop .about-crop-lead { font-size: 16px; line-height: 25px; margin-bottom: 24px; }
  .home-page .about-crop .about-crop-description { font-size: 14px; line-height: 23px; }
  .home-page .about-crop .about-crop-hero { position: relative; display: block; width: 100%; height: auto; object-fit: contain; mask-image: none; }
  .home-page .about-crop .about-crop-intro { display: flex; flex-direction: column-reverse; }
  .home-page .about-crop .about-crop-pillars { grid-template-columns: 1fr; }
  .home-page .about-crop .about-crop-pillar { padding: 30px 24px; }
  .home-page .about-crop .about-crop-pillar + .about-crop-pillar::before { inset: 0 24px auto; width: auto; height: 1px; }
  .home-page .about-crop .about-pillar-number { font-size: 32px; line-height: 40px; }
  .home-page .about-crop .about-pillar-copy h3 { font-size: 20px; white-space: normal; }
  .home-page .about-crop .about-pillar-copy p { font-size: 14px; line-height: 23px; margin-top: 24px; }
}