/* Two-by-two chapter menu inspired by the supplied reference. */
.chapter-style-d .chapter-nav{
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid rgba(255,255,255,.18);
}
.chapter-style-d .chapter-nav a{
  min-height:112px;
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  align-content:center;
  align-items:center;
  gap:18px;
  padding:20px clamp(30px,5vw,82px);
  border-right:1px solid rgba(255,255,255,.28);
  border-bottom:1px solid rgba(255,255,255,.28);
  font-size:clamp(28px,2.7vw,43px);
}
.chapter-style-d .chapter-nav a:nth-child(2n){border-right:0}
.chapter-style-d .chapter-nav a::after{
  top:50%;
  right:clamp(32px,5vw,82px);
  width:64px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.7);
  border-radius:999px;
  font-size:17px;
  transform:translateY(-50%);
}
.chapter-style-d .chapter-nav.is-animated a::after{transform:translateY(-50%)}
.chapter-style-d .chapter-nav a:hover::after{color:#071827;background:#fff;transform:translate(5px,calc(-50% - 3px))}
.chapter-style-d .chapter-nav a span{align-self:center}
.chapter-style-d .chapter-nav a strong{padding-right:110px}

@media(max-width:900px){
  .chapter-style-d .chapter-nav a{
    min-height:86px;
    grid-template-columns:1fr;
    gap:10px;
    padding:16px 18px;
    font-size:clamp(18px,5.4vw,27px);
  }
  .chapter-style-d .chapter-nav a strong{padding-right:32px}
  .chapter-style-d .chapter-nav a::after{
    top:18px;
    right:16px;
    width:34px;
    height:34px;
    border-radius:50%;
    font-size:12px;
    transform:none;
  }
  .chapter-style-d .chapter-nav.is-animated a::after{transform:none}
  .chapter-style-d .chapter-nav a:hover::after{transform:translate(2px,-2px)}
}
@media(max-width:420px){
  .chapter-style-d .chapter-nav a{min-height:80px;padding:14px 12px;font-size:16px}
  .chapter-style-d .chapter-nav a strong{padding-right:26px}
  .chapter-style-d .chapter-nav a::after{top:14px;right:12px;width:30px;height:30px}
}

/* Balance the hero composition on wide screens. */
@media(min-width:901px){
  .hero-copy{left:clamp(96px,12vw,220px)}
}