[data-component-id="blog"] {
  .articles__list[data-page="1"] {
    @media screen and (min-width: 992px) {
      &:not(.search-results) {
        .n-blog-post:first-child {
          grid-column: 3 span;

          .n-blog-post__inner {
            display: grid;
            gap: 1.5rem;
            grid-template-columns: repeat(3, 1fr);
          }

          .n-blog-post__image-wrapper {
            grid-column: 2 span;
          }

          .n-blog-post__content {
            justify-content: center;
          }

          .n-blog-post__info {
            padding-inline: 0;
          }

          .n-blog-post__categories {
            margin-top: 1.75rem;
            height: auto;
          }

          .n-blog-post__categories-wrapper {
            width: 100%;
            position: static;
            flex-wrap: wrap;
          }
        }
      }
    }
  }

  /* pagination */
  & .js--pagination-button {
    text-decoration: none;
    background-color: #ffffff00;
    padding: 4px 8px;
    font-size: 1rem;
    color: #000b1c;
    transition:
      background-color 0.3s ease,
      border-color 0.3s ease,
      opacity 0.3s ease,
      color 0.3s ease;

    &[tabindex="-1"] {
      pointer-events: none;
    }

    &:first-child,
    &:last-child {
      padding-left: 1.25rem;
      padding-right: 1.25rem;

      &:not([disabled="true"]):hover {
        opacity: 0.8;
      }
    }

    &:not(:first-child, :last-child) {
      height: 2.5rem;
      min-width: 2.5rem;
      border: 1px solid #e6e7e8;
      background-color: #000b1c1a;
      border-right: 0;
      border-left: 0;
    }

    &:not(:first-child, :last-child, .js--pagination-empty-place, .js--pagination-current) {
      &:hover {
        background-color: rgba(#000b1c, 0.2);
      }
    }

    &:nth-child(2) {
      border-left: 1px solid #e6e7e8;
      border-radius: 5px 0 0 5px;
    }

    &:nth-last-child(2) {
      border-radius: 0 5px 5px 0;
      border-right: 1px solid #e6e7e8;
    }

    &:not(:first-child, :last-child).js--pagination-current {
      background-color: #000b1c;
      color: #ffffff;
      border-color: #000b1c;
      cursor: default;
    }

    &[disabled="true"].js--pagination-empty-place,
    &[disabled="true"]:not(.js--pagination-current) {
      color: #000b1c80;
    }
  }

  & .js--pagination-empty-place {
    cursor: default;

    & + .js--pagination-empty-place {
      display: none;
    }
  }
}