.section-article-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 0 1rem;
}

.section-article-list > .div-article-preview {
  padding: 0.25rem;
  border-radius: 0.25rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.section-article-list > .div-article-preview > .div-article-image {
  aspect-ratio: 2 / 1;
  container-type: size;

  display: flex;
  align-items: center;
  justify-content: center;
}

div.section-article-list div.article-image-container {
  display: flex;
  align-items: center;
  justify-content: center;

  background-color: rgba(0, 0, 0, 0.075);
  border-radius: 0.25rem;
  overflow: hidden;

  aspect-ratio: 2 / 1;
  container-type: size;
}

div.section-article-list p.article-image {
  font-size: 33.333cqh;
}

div.section-article-list .article-title {
  font-size: 1.25rem;
  font-weight: bold;
}