.block-articles {
  --padding-inline: calc(
    var(--article-card-shadow-offset-x) + var(--article-card-shadow-blur)
  );

  position: relative;
  padding-block: calc(
    var(--article-card-shadow-offset-y) + var(--article-card-shadow-blur)
  );
  padding-inline: var(--padding-inline);
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--padding-inline);
  scrollbar-width: none;
  background-color: rgb(var(--color-background));
  scroll-behavior: smooth;
}

.block-articles > li {
  flex-shrink: 0;
  scroll-snap-align: start;
}

@media (max-width: 959px) {
  .block-articles {
    width: calc(100% + var(--page-padding) * 2);
    padding-inline: var(--page-padding);
    margin-inline: calc(-1 * var(--page-padding));
    overflow-y: hidden;
    scroll-padding-inline: var(--page-padding);
  }
}

.block-article-card__info {
  padding: 16px 0;
}
.block-article-card__title {
  color: #222222;
  font-size: 16px;
}

.block-article-card__date-author {
  color: #959279;
  margin: 8px 0;
  text-align: center;
  font-size: 12px;
}

.block-article-card__button {
  display: flex;
  justify-content: center;
}

/* 骨架屏动画 */
.animate-pulse.block-articles__item .block-article-card__image-wrapper,
.animate-pulse.block-articles__item .block-article-card__title,
.animate-pulse.block-articles__item .block-article-card__date-author {
  color: transparent;
  background: #e5e7eb;
}

.animate-pulse.block-articles__item .block-article-card__image-wrapper img {
  opacity: 0;
}