.news-archive {
  & .news-archive__query-loop {
    padding: 40px var(--wp--preset--spacing--40);

    @media (min-width: 1024px) {
      padding: 80px var(--wp--preset--spacing--40) 90px
        var(--wp--preset--spacing--40);
    }
  }

  & .news-archive__post-list {
    width: 100%;
    list-style: none;
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;

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

    @media (min-width: 1024px) {
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    & li {
      margin: 0;

      @media (min-width: 768px) and (max-width: 1023px) {
        &:nth-child(10n + 1),
        &:nth-child(10n + 4),
        &:nth-child(10n + 7) {
          grid-column: span 2;
        }
      }

      @media (min-width: 1024px) {
        &:nth-child(10n + 1),
        &:nth-child(10n + 7) {
          grid-column: span 2;
        }
      }
    }

    & .news-archive__post {
      width: 100%;
      height: 220px;
      position: relative;
      display: flex;
      flex-direction: column;
      z-index: 1;
      overflow: hidden;
      border-radius: 12px;

      @media (min-width: 576px) {
        height: 260px;
      }

      @media (min-width: 768px) {
        height: 300px;
      }

      @media (min-width: 992px) {
        height: 315px;
      }

      @media (min-width: 1024px) {
        height: 330px;
      }

      &:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          180deg,
          rgba(217, 217, 217, 0) 0%,
          rgba(0, 0, 0, 0.3) 70%,
          rgba(0, 0, 0, 0.6) 100%
        );
        z-index: 2;
        pointer-events: none;
      }

      & .news-archive__post-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;

        & a,
        & img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        & img {
          transform: scale(1);
          transition: transform 0.3s ease;
        }
      }

      & .news-archive__post-title {
        font-size: 20px;
        font-weight: 700;
        line-height: 26px;
        text-transform: uppercase;
        color: var(--wp--preset--color--white);
        z-index: 3;
        position: relative;
        padding: 12px 18px;
        background: transparent;
        margin-top: auto;

        @media (min-width: 1024px) {
          font-size: 24px;
          font-weight: 700;
          line-height: 30px;
          max-width: 360px;
        }

        & a {
          color: var(--wp--preset--color--white);
          text-decoration: none;
          &:hover {
            text-decoration: underline;
          }
        }
      }

      &:hover {
        & .news-archive__post-image img {
          transform: scale(1.1);
        }
      }
    }
  }

  & .wp-block-query-pagination-is-layout-flex.wp-block-buttons {
    width: 100%;
    max-width: 350px;
    margin: 16px auto 0 auto;
    @media (min-width: 1024px) {
      width: max-content;
      margin: 20px auto 0 auto;
    }

    & a {
      width: 100%;
      display: block;
      text-align: center;
    }
  }
}