/**
 *
 * Estrutura da pagina interna: grade conteudo/lateral, banner do topo e listas. Tambem usada pelas listagens de noticias.
 * handler: pp-article-page
 * deps: pp-layout
 * version: 1.0.0
 *
 * @package theme-single
 *
 */

.article-page__banner {
  overflow: hidden;
  border-radius: var(--radius-md);
}

.article-page__main {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-4);
}

.article-page .news-card__media {
  aspect-ratio: 760 / 333;
}

.article-page__banner img {
  display: block;
  width: 100%;
  height: auto;
}

.article-page__layout {
  display: grid;
  gap: var(--space-7);
}

.article-page__list {
  padding: 0 var(--space-3);
}

.article-page__list .news-card {
  margin: 0 calc(var(--space-3) * -1);
}
.article-page__list .news-card--ads {
  margin: 0 calc(var(--space-5) * -1);
}

.article-page__list,
.article-page__list-container {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .article-page .news-card {
    gap: var(--space-6);
  }
  .article-page .news-card__media {
    aspect-ratio: 760 / 500;
  }
}

@media (min-width: 1024px) {
  .article-page__banner {
    margin-bottom: var(--space-6);
  }

  .article-page__main {
    gap: var(--space-8);
    padding: var(--space-6) var(--space-4);
  }

  .article-page__layout {
    grid-template-columns: 5fr 2fr;
    justify-content: center;
  }

  .article-page__list,
  .article-page__list-container {
    gap: var(--space-7);
  }
}

@media (min-width: 1280px) {
  .article-page__layout {
    gap: var(--space-12);
  }
}