.page-hero, .legal-hero {
  padding : 90px 8% 70px;
  border-bottom : 1px solid var(--line)
}
.page-hero h1, .legal-hero h1 {
  font-size : clamp(58px, 9vw, 120px);
  line-height : .9;
  font-weight : 500;
  letter-spacing : -.07em;
  margin : 42px 0 24px
}
.page-hero h1 em, .legal-hero h1 em, .article h1 em {
  font-family : Georgia, serif;
  font-weight : 400
}
.page-hero p {
  max-width : 430px;
  font-size : 19px
}
.blog-list {
  padding : 70px 8%;
  display : grid;
  grid-template-columns : 1.2fr .8fr;
  gap : 52px
}
.blog-list article a, .related-grid a {
  display : block
}
.blog-list img, .related-grid img {
  width : 100%;
  height : 270px;
  object-fit : cover;
  border-radius : 16px
}
.blog-feature img {
  height : 430px;
  border-radius : 18px 90px 18px 18px
}
.blog-meta {
  color : var(--green);
  font-size : 10px;
  letter-spacing : .13em;
  text-transform : uppercase;
  font-weight : 700;
  margin-top : 22px
}
.blog-feature h2 {
  font-size : clamp(32px, 4vw, 56px);
  line-height : 1;
  margin : 16px 0;
  font-family : Georgia, serif;
  font-weight: 500;
}
.blog-card h3, .related-grid h3 {
  font-size : 27px;
  line-height : 1.1;
  margin : 14px 0;
  font-family : Georgia, serif;
  font-weight: 500;
}
.blog-list p {
  max-width : 520px
}
.blog-grid {
  display : grid;
  gap : 30px
}
.article {
  padding : 65px 8% 90px
}
.back-link {
  color : var(--green);
  font-size : 11px;
  letter-spacing : .1em;
  text-transform : uppercase
}
.article-heading {
  max-width : 1095px;
  margin : 0px auto;
  text-align : center
}
.article h1 {
  font-size : clamp(48px, 7vw, 70px);
  line-height : .99;
  letter-spacing : -.06em;
  font-weight : 500;
  margin : 22px 0
}
.article-intro {
  font-size : 21px;
  max-width : 600px;
  margin : 28px auto
}
.article-image {
  display : block;
  width : 100%;
  max-height : 590px;
  object-fit : cover;
  border-radius : 18px 100px 18px 18px
}
.article-body {
  max-width : 670px;
  margin : 60px auto 0;
  font-size : 18px
}
.article-body h2 {
  font-size : 34px;
  margin : 48px 0 12px
}
.article-body p {
  margin : 0 0 24px
}
.related {
  padding : 70px 8%;
  background : var(--paper)
}
.related-grid {
  display : grid;
  grid-template-columns : repeat(2, 1fr);
  gap : 28px;
  margin-top : 28px;
  max-width : 900px
}
.related-grid img {
  height : 250px
}
.legal-hero p {
  font-size : 12px;
  color : #667
}
.legal-content {
  max-width : 760px;
  padding : 70px 0px;
  font-size : 17px;
  margin: 0 auto;
}
.legal-content h3 {
  font-size : 30px;
  margin : 46px 0 12px;
  color : var(--green)
}

.legal-content p {
  margin : 0 0 22px
}
.legal-content a {
  color : var(--green)
}
  @media(max-width : 760px) {
  .page-hero, .legal-hero{padding : 60px 6% 48px
}
.page-hero h1, .legal-hero h1 {
  font-size : 70px;
  margin : 30px 0 22px
}
.blog-list {
  padding : 48px 6%;
  display : block
}
.blog-grid {
  margin-top : 34px
}
.blog-feature img {
  height : 300px;
  border-radius : 16px 65px 16px 16px
}
.blog-list img {
  height : 240px
}
.article {
  padding : 42px 6% 65px
}
.article-heading {
  margin : 55px auto 32px
}
.article h1 {
  font-size : 53px
}
.article-intro {
  font-size : 18px
}
.article-image {
  height : 300px;
  border-radius : 16px 65px 16px 16px
}
.article-body {
  margin-top : 40px;
  font-size : 17px
}
.related {
  padding : 50px 6%
}
.related-grid {
  grid-template-columns : 1fr
}
.legal-content {
  padding : 48px 6% 80px;
  font-size : 16px
}
.legal-content h2 {
  font-size : 27px
}
}