.hero {
  container: hero / inline-size;

  h1 {
    text-align: center;
  }

  p {
    padding-block: var(--sp-120-40);
  }
}

.featured-articles {
  container: featured-articles / inline-size;

  ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--sp-430), 100%), 1fr));
    gap: var(--sp-20);
  }
}

.articles {
  container: articles / inline-size;

  ul {
    &:nth-of-type(1) {
      display: flex;
      flex-direction: row;
      gap: var(--sp-8);
    }

    &:nth-of-type(2) {
      margin-block-start: var(--sp-20);
    }
  }
}