.articles-page {
  padding: clamp(42px, 6vw, 88px) 0 clamp(50px, 7vw, 100px);
  background: #fafbfc;
  color: #19212b;
  color-scheme: light;
}
.articles-wrap {max-width: 1160px}
.articles-intro {margin-bottom: clamp(30px, 5vw, 72px)}
.articles-intro h1 {
  font-size: clamp(48px, 6.5vw, 92px);
  line-height: 1.04;
  letter-spacing: -.04em;
}
.articles-intro p {
  max-width: 38em;
  color: #4d5d71;
  margin-top: 17px;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.4;
}
.articles-collection {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  gap: clamp(22px, 6vw, 90px);
  border-top: 1px solid #cdd6e1;
  padding-block: clamp(23px, 3vw, 43px);
}
.articles-collection h2 {font-size: clamp(26px, 3.1vw, 43px); line-height: 1.08}
.articles-collection p {max-width: 32ch; margin-top: 12px; line-height: 1.5; color: #4d5d71}
.articles-list {margin: 0; padding: 0; list-style: none}
.articles-list li + li {border-top: 1px solid #dbe1e8}
.articles-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 3px;
  color: inherit;
  font-size: clamp(16px, 1.4vw, 21px);
  font-weight: 540;
  line-height: 1.35;
}
.articles-list a svg {flex: none; color: #596b82}
.articles-list a:hover, .articles-list a:hover svg {color: #075db9}
.articles-list a:focus-visible {outline: 2px solid #075db9; outline-offset: 3px}
@media (max-width: 720px) {
  .articles-collection {grid-template-columns: 1fr; gap: 12px}
  .articles-collection p {max-width: 48ch}
}