.newsWrapper {
  margin: 0 calc(var(--spacing-sitepadding-inline)*-1);
  padding: var(--spacing-sitepadding-block) var(--spacing-sitepadding-inline);
}

.newsList {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--spacing-gap-column);
  row-gap: var(--spacing-gap-row);

  li {
    grid-column: span 3;

    h2 {
      font-size: 1.4rem;
    }

    &:nth-child(1),
    &:nth-child(2) {
      grid-column: span 6;

      h2 {
        font-size: 1.8rem;
      }
    }

    &:nth-child(3),
    &:nth-child(4),
    &:nth-child(5) {
      grid-column: span 4;

      h2 {
        font-size: 1.6rem;
      }
    }
  }

  &.featured {
    li {

      &:nth-child(1),
      &:nth-child(2),
      &:nth-child(3),
      &:nth-child(4),
      &:nth-child(5) {
        grid-column: span 3;

        h2 {
          font-size: 1.4rem;
        }
      }
    }
  }
}

.showMore {
  margin-top: var(--spacing-s);
  text-align: center;
}

@media (max-width: 900px) {
  .newsList, .newsList.featured {
    li {
      grid-column: span 6;
      &:nth-child(1),
      &:nth-child(2),
      &:nth-child(3),
      &:nth-child(4),
      &:nth-child(5){
        grid-column: span 6;

        h2 {
          font-size: 1.4rem;
        }
      }
    }
  }
}

@media (max-width: 600px) {
  .newsList, .newsList.featured {
    li {
      grid-column: span 12;
      &:nth-child(1),
      &:nth-child(2),
      &:nth-child(3),
      &:nth-child(4),
      &:nth-child(5){
        grid-column: span 12;

        h2 {
          font-size: 1.2rem;
        }
      }
    }
  }
}