.archive-hero{
  position:relative;
  min-height:360px;
  display:grid;
  align-items:end;
  background:
    linear-gradient(90deg,rgba(7,37,59,.86),rgba(7,37,59,.3)),
    url("../images/og-hajj.jpg") center 42% / cover no-repeat;
  color:#fff;
}
.archive-hero__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.42));
}
.archive-hero__content{
  position:relative;
  z-index:1;
  padding:90px 0 58px;
}
#archive-title{
  margin:0;
  max-width:760px;
  color:#fff;
  font-size:36px;
  line-height:1.02;
}
.archive-hero p:last-child{
  max-width:650px;
  margin:1rem 0 0;
  font-size:clamp(1rem,1.5vw,1.2rem);
}
.archive-section{
  padding:clamp(38px,6vw,76px) 0;
  background:#f4f8fb;
}
.archive-intro{
  margin-bottom:20px;
}
.archive-back{
  color:var(--primary);
  font-weight:400;
  text-decoration:none;
}
.archive-back:hover,
.archive-back:focus-visible{
  text-decoration:underline;
}
.roadmap-shell.archive-roadmap-shell{
  width:100%;
  box-sizing:border-box;
  background:#3f4650;
}

@media (max-width:760px){
  .archive-hero{
    min-height:320px;
    background-position:58% center;
  }
  #archive-title{font-size:26px}
}