/*------------------Actualités------------------*/
body.actualites {
  --background: var(--lightpink);
  --text: var(--base0);
}

body.actualites .content {
  max-width: 100%;
}

body.actualites header > h1 {
  font-size: var(--huge-font-size);
  color: var(--base0);
  margin-bottom: 0.3em;
}

body.actualites #all-articles {
  display: flex;
  flex-flow: row wrap;
}

body.actualites #all-articles > p,
body.actualites .videos > p {
  width: 100%;
  display: block;
  font-size: var(--small-font-size);
  font-weight: 500;
}

body.actualites #all-articles > p > span,
body.actualites .videos > p > span {
  padding-bottom: 0.3em;
  border-bottom: 4px solid var(--base100);
}

body.actualites #all-articles > a {
  width: calc(33.33333% - var(--small-margin));
  margin-right: var(--small-margin);
  margin-bottom: var(--small-margin);
  border-radius: 6px;
  box-shadow: rgba(26, 26, 26, 0.08) 0px -1px 4px 0px,
    rgba(26, 26, 26, 0.12) 0px 4px 8px 0px;
  overflow: hidden;
}

body.actualites #all-articles > a:hover {
  background-color: var(--custom2);
}

body.actualites #all-articles > a > header {
  background-color: var(--base100);
  padding: 0.5em var(--small-margin);
  margin-bottom: var(--small-margin);
}

body.actualites #all-articles > a > header > p {
  font-size: 1rem;
  letter-spacing: initial;
  margin: 0;
}

body.actualites #all-articles > a > h1 {
  font-family: "Euripides";
  font-size: var(--big-font-size);
  line-height: 1.1;
  padding: 0 var(--small-margin) 0;
  margin-bottom: 0.2em;
}

body.actualites #all-articles > a > h2 {
  font-size: var(--med-font-size);
  font-weight: 500;
  padding: 0 var(--small-margin) var(--small-margin);
}

body.actualites .videos {
  margin-top: 2em;
}

body.actualites .videos > .video-container {
  display: flex;
  flex-flow: row wrap;
}

body.actualites .videos a {
  display: inline-block;
  width: calc(33.33333% - var(--small-margin));
  background-color: var(--base100);
  border: 1px solid;
  border-radius: 6px;
  margin-right: var(--small-margin);
  margin-bottom: var(--small-margin);
  overflow: hidden;
}

body.actualites .videos a:hover {
  background-color: var(--custom2);
}

body.actualites .videos a > figure {
  height: 200px;
}

body.actualites .videos a > figure > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.actualites .videos a > h2 {
  font-size: var(--med-font-size);
  font-weight: 900;
  padding: 0.5em var(--small-margin) 0.6em;
  margin: 0;
}

/*------------------Responsive------------------*/
@media screen and (max-width: 1024px) {
  body.actualites #all-articles > a {
    width: 100%;
    margin-right: 0;
    margin-bottom: var(--small-margin);
  }

  body.actualites .videos a {
    width: calc(50% - 2em);
  }
}

@media screen and (max-width: 768px) {
  body.actualites #all-articles {
    width: 100%;
  }

  body.actualites .videos a h2 {
    font-size: var(--small-font-size);
  }
}

@media screen and (max-width: 580px) {
  body.actualites .videos a {
    width: 100%;
    margin-right: 0;
  }
}