.principles {
  padding: 140px max(22px, calc((100vw - var(--max)) / 2));
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 9vw;
  background: #dfe0dc;
  color: #080a0c;
}
.principles-lead { position: sticky; top: 130px; align-self: start; }
.principles .kicker { margin-top: 55px; color: var(--red); }
.principles h2 {
  margin: 0;
  font: 900 clamp(42px, 5vw, 72px)/.95 Montserrat, sans-serif;
  letter-spacing: -.05em;
  text-transform: uppercase;
}
.principles h2 em { font-style: normal; color: var(--red); }
.principles-grid { border-top: 1px solid #a7aaa7; }
.principles-grid article {
  display: grid;
  grid-template-columns: 52px 150px 1fr;
  gap: 20px;
  padding: 32px 0;
  border-bottom: 1px solid #a7aaa7;
}
.principles-grid article span { color: var(--red); font-size: 11px; font-weight: 800; }
.principles-grid article h3 { margin: 0; font: 800 20px/1 Montserrat, sans-serif; text-transform: uppercase; }
.principles-grid article p { margin: 0; color: #555b5e; }
.principles-grid aside {
  margin-top: 70px;
  padding: 34px;
  border-left: 5px solid var(--red);
  background: #080a0c;
  color: #fff;
}
.principles-grid aside small { display: block; color: #969a9d; font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.principles-grid aside strong { display: block; margin: 15px 0; font: 900 clamp(30px, 4vw, 52px)/1 Montserrat, sans-serif; text-transform: uppercase; }
.principles-grid aside p { margin: 0; color: #aeb2b5; }
@media (max-width: 900px) {
  .principles { grid-template-columns: 1fr; }
  .principles-lead { position: static; }
}
@media (max-width: 560px) {
  .principles { padding-top: 100px; padding-bottom: 100px; }
  .principles-grid article { grid-template-columns: 40px 1fr; }
  .principles-grid article p { grid-column: 2; }
}