.main-blog__header {
  padding: var(--nova-space-sm) var(--nova-space-md);
  gap: var(--nova-space-md);

  & > h1 {
    line-height: 0.75;

    @media screen and (max-width: 989px) {
      line-height: 1.2;
      font-size: 40px;
    }
  }

  & .main-blog__description {
    max-width: var(--nova-blog-max-description);
    text-align: center;
    margin: auto;

    & p {
      font: var(--nova-h6-font);
      letter-spacing: var(--nova-h6-letter-spacing);
      text-transform: var(--nova-h6-text-transform);
      -webkit-font-smoothing: antialiased;
    }

    & ul, & ol {
      text-align: left;
    }

    & strong {
      font-weight: 700;
    }

    & em {
      font-style: italic;
    }

    & a {
      text-underline-offset: 1px;
    }
  }

  @media screen and (min-width: 990px) {
    padding: var(--nova-space-md) var(--nova-space-sm);
    gap: var(--nova-space-sm);
  }
}

.main-blog__featured-article {
  flex-direction: column;

  & .main-blog__featured-article__text {
    gap: var(--nova-space-xs);
  }

  & .main-blog__featured-article__wrapper {
    max-width: var(--nova-blog-featured-max-width);
  }

  & .main-blog__featured-article__image {
    aspect-ratio: var(--aspect-ratio);
  }

  @media screen and (min-width: 990px) {
    flex-direction: row;

    & .main-blog__featured-article__media,
    & .main-blog__featured-article__content {
      width: 50%;
    }

    & .main-blog__featured-article__wrapper {
      padding-block: var(--nova-space-md);
    }

    & .main-blog__featured-article__text {
      gap: var(--nova-space-sm);
    }
  }
}

.blog-tags {
  & .blog-tags__wrapper {
    gap: var(--nova-space-xs);
  }

  & .blog-tags__item {
    padding-inline: var(--nova-space-md);
    padding-block: var(--nova-space-xs);
    border-radius: var(--nova-button-radius);
    white-space: nowrap;
    height: var(--category-height);
    border: 2px solid transparent;

    &.active {
      border: 2px solid var(--nova-color-black);
      border-radius: 0;
    }
  }

  @media screen and (max-width: 989px) {
    overflow-y: auto;
    padding-inline: var(--nova-space-page-margin);
    -ms-overflow-style: none;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }

    & .blog-tags__wrapper {
      width: fit-content;
    }
  }

  @media screen and (min-width: 990px) {
    padding-inline: var(--nova-space-page-margin);

    & .blog-tags__wrapper {
      column-gap: var(--nova-space-sm);
      row-gap: var(--nova-space-xs);
      flex-wrap: wrap;
      justify-content: center;
    }

    & .blog-tags__item {
      padding-inline: var(--nova-space-sm);
    }
  }
}

.blog-articles {
	display: grid;
  padding-top: var(--nova-space-sm);
  padding-bottom: var(--nova-space-md);
  padding-inline: var(--nova-space-page-margin);
  gap: var(--nova-space-sm);

  @media screen and (min-width: 600px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media screen and (min-width: 990px) {
    grid-template-columns: repeat(3, 1fr);
    padding-bottom: var(--nova-space-lg);
  }

  @media screen and (min-width: 1400px) {
    grid-template-columns: repeat(4, 1fr);
  }
}