@import "pygment.css";

.article {
  margin-top: 4em;
}

.article-footer {
 color: var(--secondary-color);
}

.article .article-footer {
  margin-top: 4em;
  padding: 1em 0;
  border-top: solid 1px var(--secondary-color);
  /* border-bottom: solid 1px var(--secondary-color); */
}

.article-body > p > img,
.article-body > p > video {
  display: block;
  max-width: 100%;
  margin: 3em auto;
}

.article-body .article-summary {
  color: var(--secondary-color);
  font-style: italic;
  /* border-top: solid 1px var(--secondary-color); */
  border-bottom: solid 1px var(--secondary-color);
  margin: 2em 0 3em 0;
}

.article-body li {
  margin: .2em 0;
}

.article-body .image-margin-xl {
  display: block;
  margin: 3em auto;
}

.deux-colonnes {
  display: flex;
  align-items: center;
  gap: 1rem;

  & > *  { flex: 0 1 50%; max-width: calc(50% - 1rem); }
}

.quatre-colonnes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;

  & > *  { 
    flex: 0 1 calc(25% - 1rem);
  }

  img { width: 100%; }
}

figure {
  margin: 0;
  
  &> figcaption {
    text-align: center;
    font-style: italic;
    font-size: .8em;
  }
}