.site-loop {
  padding: 0 var(--s-space);
  --wp--style--block-gap: 0px;
  margin-bottom: var(--s-space);
  @media (min-width: 600px) {
    li {
      &:nth-child(2n) {
        .pic {
          order: 2;
        }
      }
    }
  }
  @media (min-width: 992px) {
    padding: 0 40px;
  }
  @media (min-width: 1200px) {
    padding: 0 60px;
  }
  .wp-block-columns {
    margin-bottom: 0;
    align-items: stretch;
  }
  .wp-block-column {
    position: relative;
  }
  .wp-block-post-featured-image {
    margin: 0;
    padding-top: 75%;
    height: 0;

    img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      object-fit: cover;
    }
  }
  .pic {
    background-color: var(--wp--preset--color--header);
  }
  .info {
    background-color: var(--wp--preset--color--card);
    padding: var(--s-space);
    display: flex;
    justify-content: center;
    flex-direction: column;
    > p {
      font-size: 0.9em;
      margin: 6px 0;
    }
  }
  .entty-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .cat {
    > a {
      display: inline-block;
      padding: 2px 10px;
      background: var(--wp--preset--color--accent);
      color: #fff;
      margin-right: 12px;
    }
    .wp-block-post-terms__separator {
      display: none;
    }
  }
  .wp-block-post-title {
    font-size: 1.8em;
  }
  .wp-block-post-excerpt__excerpt {
    line-height: 3ex;
    max-height: 12ex;
    overflow: hidden;
    margin-top: 0;
  }
  .-show {
    .info > p {
      animation-name: fadeInUp;
      animation-duration: 1s;
      animation-fill-mode: both;
    }
    .wp-block-post-title {
      animation-name: fadeInUp;
      animation-duration: 1s;
      animation-delay: 0.5s;
      animation-fill-mode: both;
    }
    .wp-block-post-excerpt__excerpt {
      animation-name: fadeInUp;
      animation-duration: 1s;
      animation-delay: 1s;
      animation-fill-mode: both;
    }
  }
}
.wp-block-query-pagination {
  display: flex;
  align-items: center;
  a {
    color: var(--wp--preset--color--text);
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
    border-radius: 24px;
  }
  .current {
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
    border-radius: 24px;
    margin: 0 10px;
    background-color: var(--wp--preset--color--card);
  }
}
.wp-block-post-title {
  a {
    color: var(--wp--preset--color--text);
    background: linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)) no-repeat left 90%/0% 2px;
    padding-bottom: 0.3em;
    &:hover {
      background-size: 99% 2px;
    }
  }
}