.why {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  background:var(--alternate)
}
.why__heading {
  padding:48px 40px
}
.why__heading h2 {
  font-size:64px;
  line-height:1
}
.reason {
  position:relative;
  min-width:0;
  height:512px;
  overflow:clip
}
.reason:nth-child(even) {
  background:#0000001a
}
.reason__copy {
  height:256px;
  padding:48px 20px 20px 40px;
  position:relative;
  z-index:1
}
.reason h3 {
  font-size:32px;
  line-height:1.28;
  max-width:440px;
  letter-spacing:-.5px
}
.reason h3 span {
  color:var(--red)
}
.reason p {
  margin-top:12px;
  max-width:420px;
  color:var(--muted);
  font-size:16px;
  line-height:1.28;
  font-weight:600
}
.reason__image {
  height:256px;
  position:relative;
  overflow:hidden
}
.reason__image img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1.1s var(--ease)
}
.reason--four .reason__image img {
  width:127.2%;
  height:159%;
  max-width:none;
  position:absolute;
  left:-13.6%;
  top:-43.13%
}
.reason--five .reason__image img {
  width:140.8%;
  height:176%;
  max-width:none;
  position:absolute;
  left:-30.23%;
  top:-71.67%
}
.reason:hover .reason__image img {
  transform:scale(1.035)
}
.reason.is-entering .reason__copy {
  animation:reason-copy-down .9s var(--ease) both;
  animation-delay:var(--reason-delay,0ms)
}
@keyframes reason-copy-down {
  from {
    transform:translateY(-18px);
    opacity:.5
  }
  to {
    transform:translateY(0);
    opacity:1
  }
}
@media(min-width:1600px) {
  .why__heading {
    padding-left:var(--gutter)
  }
  .reason__copy {
    padding-left:40px
  }
  .why {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
}
@media(max-width:1199px) and (min-width:768px) {
  .why__heading {
    padding:38px 24px
  }
  .why__heading h2 {
    font-size:48px
  }
  .reason__copy {
    padding:38px 24px 16px
  }
  .reason h3 {
    font-size:26px
  }
  .reason p {
    font-size:14px
  }
}
@media(max-width:767px) {
  .why {
    display:flex;
    flex-direction:column;
    background:var(--paper)
  }
  .why__heading {
    display:none
  }
  .reason {
    width:100%;
    height:324px;
    padding:12px;
    background:transparent!important
  }
  .reason__image {
    height:300px;
    border-radius:24px
  }
  .reason__image img {
    object-fit:cover
  }
  .reason__copy {
    position:absolute;
    left:12px;
    right:12px;
    top:12px;
    height:auto;
    min-height:166px;
    padding:28px 20px 24px;
    border-radius:24px 24px 0 0;
    background:linear-gradient(#000c,#0008 90%,transparent);
    color:var(--paper)
  }
  .reason h3 {
    font-size:23px;
    line-height:1.2;
    letter-spacing:0
  }
  .reason p {
    font-size:15px;
    line-height:1.45;
    font-weight:500;
    color:var(--paper);
    opacity:.8;
    margin-top:12px
  }
  .reason--four .reason__image img {
    width:122.95%;
    height:100%;
    left:-11.48%;
    top:0;
    object-fit:fill
  }
  .reason--five .reason__image img {
    width:123.04%;
    height:100.07%;
    left:-11.52%;
    top:-.07%;
    object-fit:fill
  }
  .reason.is-entering .reason__copy {
    animation-duration:.85s
  }
}